我有两个组成部分。 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按以下顺序工作:
component
或directive
的属性或选择器{{ }}
插值因此,也许这就是为什么未在选择器中评估插值的原因。因为选择器的评估已完成,然后指令的评估才开始。
如果要决定应呈现什么组件,则可以使用
*ngIf
语句:<ng-container *ngIf="childComponentl else anotherComponent">
<div id="child"></div>
</ng-container>
<ng-template #anotherComponent>
test
</ng-template>
typescript :
childComponent='"child1"';
更新:
如果要避免使用硬代码,则可以动态加载组件: