Question

假设我有10个具有选择器的组件（必须插入完全停止以防止它们被省略）

＆LT ;. app-comp1。＆gt; ＆LT ;. app-comp2。＆gt; ... ＆LT ;. app-comp10。＆gt;

在父组件中，我想基于具有组件名称的属性仅插入上述十个中的一个。例如。 this.component ='comp7' 所以我应该只包括＆lt;。 app-comp7。＆gt;

P.S。我知道它可以通过ngIf完成。但这意味着写10行。我需要使用更短的代码。

Answer 1

不，您的HTML中无法使用动态代码。但是，你不一定需要10 *ngIf来完成这种行为。使用ComponentFactoryResolver和条目组件，您可以动态地将您想要的任何组件插入到DOM中。

这可能是一个例子：

@Component({
  template: `<div #entry></div>`
})
export class MyComponent implements AfterContentInit {
  @ViewChild('entry', {read: ViewContainerRef})
  entry: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngAfterContentInit() {
    // Get your component's class here and save it in a variable
    const dynamicComponent = some condition ? ComponentOne : ComponentTwo;
    const factory = this.resolver.resolveComponentFactory(dynamicComponent);
    this.entry.createComponent(factory);  
  }  

}

请注意，这必须在AfterContentInit lifecycle hook。

中进行

编辑：为了回应你的评论ComponentFactoryResolver过于复杂，我认为它比使用许多*ngIf指令要简单得多。这将复杂性转移到一个简单的函数而不是许多复杂的标记行。不幸的是，由于您无法使用动态HTML标记，因此这些是您想要做的两个最佳选择。

是否可以使用字符串插值或属性绑定插入组件选择器标签？

1 个答案: