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

Question

我有两个组成部分。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的孩子？

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>

打字稿：

childComponent='"child1"';

更新：

如果要避免使用硬代码，则可以动态加载组件：

• 使用Angular将组件动态添加到DOM
• Angular 2.1.0动态动态创建子组件
• 在DOM中将动态组件作为容器的子项插入