我有两个组成部分。 1.应用程序组件,2.子组件。

为了更好地理解,代码和输出在此处位于stackblitz中:https://stackblitz.com/edit/angular-j9cwzl

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div id="child"></div>
    <div id="{{childComponent}}"></div>
  `
})
export class AppComponent  {
  childComponent='child';
}

child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: '[id=child]',
  template: '<div>I am child</div>'
})
export class ChildComponent  { }

当我直接在App组件的模板中编写子组件的ID时,它的呈现效果很好。但是,当我通过变量编写子组件的ID时,它只会创建一个id为“child”的div元素。

我的问题是为什么会这样?如何通过脚本文件中的变量动态呈现具有ID的 child ?

最佳答案

我有一个建议,为什么您的插值{{ childComponent }}无法正常工作。在我看来,Angular按以下顺序工作:

  • 首先,它会看到您的所有HTML,然后尝试查找可以评估为componentdirective的属性或选择器
  • 然后第二步是当我们找到一个组件或指令时,然后应用{{ }}插值

  • 因此,也许这就是为什么未在选择器中评估插值的原因。因为选择器的评估已完成,然后指令的评估才开始。

    如果要决定应呈现什么组件,则可以使用*ngIf语句:
    <ng-container *ngIf="childComponentl else anotherComponent">
        <div id="child"></div>
    </ng-container>
    <ng-template #anotherComponent>
        test
    </ng-template>
    

    typescript :
    childComponent='"child1"';
    

    更新:

    如果要避免使用硬代码,则可以动态加载组件:
  • Dynamically add components to the DOM with Angular
  • Angular 2.1.0 create child component on the fly, dynamically
  • Insert a dynamic component as child of a container in the DOM
  • 10-05 20:51
    查看更多