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

Posted 2023-02-23

【中文标题】如何通过将 id 存储在变量中来渲染组件？

【英文标题】：How to render a component through the id is stored in variable?

【发布时间】：2020-02-26 19:25:56

【问题描述】：

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

【问题讨论】：

blog.knoldus.com/…

【参考方案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"';

更新：

如果你想避免硬编码，那么你可以动态加载组件：

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

【讨论】：

我不想硬编码选择器 ID。我希望它通过一个变量来呈现它。