Javascript Angular 9 ng内容动态更新

如何通过更新内容元素上的选择器来更新ng内容

我在app.component.html中有代码：

<my-slider>
  <img src="../../assets/logo1.png" />
  <img src="../../assets/logo2.png" />
</my-slider>

---

当我单击按钮时，一个类被添加到元素中，但是ng内容从不更新。我能设法让它工作吗？或者我如何过滤ng内容中的组件？

我无法回答您关于

ng内容

更新的问题，并且

ng内容

是Angular IMHO的一项未充分记录的功能。但我确实有办法解决这个问题：

---

然后在组件上创建一个

公共图像：{render:boolean，src:string}[]

，并切换项目的

render

属性。

我没有关于

ng content

更新的问题的答案，

ng content

是Angular IMHO的一个文档不足的功能。但我确实有办法解决这个问题：

---

然后在组件上创建一个

public-images:{render:boolean，src:string}[]

，并切换项的

render

属性。

您需要访问组件中的主机元素，因为您建议的解决方案将自定义img组件封装到本机组件中。我建议在这里使用自定义属性指令。请参见

您需要访问组件中的主机元素，因为您建议的解决方案将自定义img组件封装到本地组件中。我建议在这里使用自定义属性指令。请参见

谢谢大家的回复。以下是我一直在寻找的解决方案：

我在img中添加了一个structural指令，而不是使其成为angular component，现在app.component.html如下所示：

<app-slider>
  <img *myImg scr="../../assets/logo1.png" />
  <img *myImg scr="../../assets/logo1.png" />
</app-slider>

最后，我的结构指令ImgDirective：

从'@angular/core'导入{指令，TemplateRef，ViewContainerRef}；
@指示({
选择器：“[myImg]”
})
导出类ImgDirective{
渲染：布尔=假；
建造师(
私有viewContainer:ViewContainerRef，
私人templateRef:templateRef
谢谢大家的回复。以下是我一直在寻找的解决方案：

我在img中添加了一个structural指令，而不是使其成为angular component，现在app.component.html如下所示：

<app-slider>
  <img *myImg scr="../../assets/logo1.png" />
  <img *myImg scr="../../assets/logo1.png" />
</app-slider>

最后，我的结构指令ImgDirective：

从'@angular/core'导入{指令，TemplateRef，ViewContainerRef}；
@指示({
选择器：“[myImg]”
})
导出类ImgDirective{
渲染：布尔=假；
建造师(
私有viewContainer:ViewContainerRef，
private templateRef:templateRef
我认为
ng content
可能不是一个非常合适的候选对象。为什么不制作一个包含
render
布尔值和img src的对象字典，然后ngFor通过它们切换render属性？我认为
ng content
可能不是一个非常合适的候选对象。为什么不制作一个包含
渲染
布尔值和img src的对象字典，然后ngFor遍历这些对象并切换渲染属性？没问题：）我看到您刚刚创建了StackOverflow帐户，恭喜。如果网站上的任何答案对您来说都是定性的，您可以向上投票以奖励海报。如果您提出了一个问题，并且答案解决了问题，您可以使用绿色复选标记接受它；）是的，谢谢你的回答。这有点让我难以理解。如果我理解正确，最好用*ngIf=“img.render”将其包装在ng contaner中为了确保元素永远不会呈现。因为我有类似的情况，“ImgComponent”超过5000个，如果全部在dom中呈现，我认为这会花费很多性能。没问题：）我看到你刚刚创建了StackOverflow帐户，恭喜你。如果网站上的任何答案对你来说都是定性的，你可以投票奖励海报。如果你问了一个问题，而一个答案解决了这个问题，你可以使用绿色复选标记来接受它；）是的，谢谢你的回答。这有点让我回想起。如果我理解正确，最好用*ngIf=“img.render”将它包装在ng contaner中确保元素永远不会被渲染。因为我有类似的情况，其中“ImgComponent”超过5000个，并且如果它都在dom中渲染，我认为它会花费很多性能。
<app-slider>
  <img *myImg scr="../../assets/logo1.png" />
  <img *myImg scr="../../assets/logo1.png" />
</app-slider>

@Component({
  selector: 'app-slider',
  template: `<ng-content></ng-content>
            <br/>
            <button (click)="render()">Toggle</button>`,
})
export class SliderComponent {
  @ContentChildren(ImgDirective) img: QueryList<ImgDirective>;
  constructor() { }
  ngAfterContentInit() {
    this.img.first.show();
  }
  render() {
    if (!this.img.last.render) {
      this.img.last.show();
    } else {
      this.img.last.hide();
    }
  }
}

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[myImg]'
})
export class ImgDirective {
  render: boolean = false;
  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>,
  ) { }

  ngOnInit() {
    this.viewContainer.clear();
  }

  show() {
    this.render = true;
    this.viewContainer.createEmbeddedView(this.templateRef)
  }

  hide() {
    this.render = false;
    this.viewContainer.clear();
  }
}