是否可以使用选择器动态渲染 Angular 组件？

Question

`是否可以动态渲染 Angular 组件？例如，我的 .ts 文件中有组件选择器名称。当我使用插值和innerHTML 绑定.html 文件中的变量时，该组件未呈现。我怎样才能实现这个目标？

我的组件选择器结构 ->

<app-assessmentitem>
  <app-responsedeclaration>
    <app-correct-response>
    </app-correct-response>
  </app-responsedeclaration>
</app-assessmentitem>

我想使用选择器动态渲染 Angular 组件`

Answer 1

是的，您可以使用 NgComponentOutlet 来做到这一点 - https://v17.angular.io/api/common/NgComponentOutlet

您只需将组件的类型传递给它即可：

@Component({selector: 'hello-world', template: 'Hello World!'})
export class HelloWorld {}

@Component({
  selector: 'ng-component-outlet-simple-example',
  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`,
})
export class NgComponentOutletSimpleExample {
  // This field is necessary to expose HelloWorld to the template.
  HelloWorld = HelloWorld;
}