时间戳

首页 > 解决方案 > 动态改变显示的角度子组件

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

问题描述

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

我已经尝试按照此处ng-content的建议使用，但似乎这是用于将父 html 注入子级（从此处）。我已经阅读了etc here的描述，但它似乎不符合我的需求。ng-template, ng-container

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

标签： angular

解决方案

Angular 官方网站上有一个很棒的教程，其中有一个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);

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

推荐阅读