动态改变显示的角度子组件

【问题标题】：Dynamically change displayed angular child component动态改变显示的角度子组件
【发布时间】：2020-11-13 02:00:06
【问题描述】：

我有一个父组件，我在其中设置了一组子组件（每个都扩展 BaseChild）。我使用 *ngFor 循环遍历孩子并显示他们的名字。我想点击孩子的名字并将孩子的html插入父母。但是我不想在父 html 中硬编码很多 *ngIf={{child1ShouldBeDisplayed}} - 会有很多孩子，事情会变得非常丑陋。

我已尝试按照建议的here 使用ng-content，但似乎这是为了将父级html 注入子级（来自here）。我已经阅读了ng-template, ng-container 等here 的描述，但它似乎不能满足我的需求。

这是一个StackBlitz，它设置了基本代码。我不确定如何继续。有没有办法在不使用 *ngIf 语句负载的情况下选择在父级中显示哪个子级？

【问题讨论】：

标签： angular

【解决方案1】：

在官方 Angular 网站上有一个很棒的 tutorial，还有一个 stackblitz 示例。

总结

您需要创建一个指令。您将通过此指令动态应用组件：

@Directive({
  selector: '[dynamic-stuff]',
})
export class DynamicStuffDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

您需要对此元素的引用 (<ng-emplate dynamic-stuff></ng-template>)：

@ViewChild(DynamicStuffDirective, {static: true}) dynamicStuff: DynamicStuffDirective;

你必须为你的组件创建一个组件工厂：

const componentFactory =
  this.componentFactoryResolver.resolveComponentFactory(selectedComponent);

你必须通过指令的 viewContainerRef 来应用它：

this.dynamicStuff.viewContainerRef.clear();
this.dynamicStuff.viewContainerRef.createComponent(componentFactory);

祝你好运，希望能帮到你。

【讨论】：