Question

我有一个父组件，其中设置了一系列子组件（每个子组件都扩展了BaseChild）。我使用* ngFor来遍历孩子并显示他们的名字。我想单击孩子的名字，然后将孩子的html插入父项。但是，我不想在父html中对很多*ngIf={{child1ShouldBeDisplayed}}进行硬编码-会有很多孩子，事情会变得很丑。

我已尝试按照建议的here使用ng-content，但这似乎是为了将父html注入子对象（来自here）。我已经阅读了ng-template, ng-container等here的说明，但似乎不符合我的需求。

这里是StackBlitz，用于设置基本代码。我不确定如何继续。有没有一种方法可以选择在父级中显示哪个子级而不使用* ngIf语句的负载？

Answer 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);

祝你好运，希望我能帮上忙。

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

1 个答案:

摘要