javascript - 如何通过 id 存储在变量中来渲染组件？

Question

我有两个组件。 1. App 组件，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 ？

Answer 1

我有一个建议，为什么你的插值 {{ childComponent }}不管用。在我看来，Angular 按以下顺序工作:

首先，它会查看您的所有 HTML，然后尝试查找可以评估为 component 的属性或选择器。或 directive

那么第二步就是当我们找到一个组件或者指令的时候，然后{{ }}应用插值

所以也许这就是为什么你的插值没有在你的选择器中评估的原因。因为选择器的评估已经完成，然后指令的评估开始了。

如果你想决定应该渲染哪个组件，那么你可以使用 *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