Question

我有一个组件A，它仅包含一个带id的div和一个使用intterHTML document.getElementById('my-router-outlet').innerHTML = '<app-component-b-page></app-component-b-page>';在div内呈现一个组件的按钮。但这不代表我不知道为什么吗？。

我试图避免使用ngIf作为选择器，出于性能原因应为其呈现组件。另外，如果我清除了innerHTML，是否会清除该组件的资源？

Answer 1

您正在直接将元素添加到dom中，而Angular不会渲染它。您应该选择* ngIf。

Answer 2

好吧，这里有几件事

innerHTML = '<app-component-b-page></app-component-b-page>'永远无法正常工作，角度不会从innerHTML调用中识别角度分量标签
使用*ngIf不会影响页面的性能，因此请执行以下操作

<app-component-b-page *ngIf="value === true"></app-component-b-page>

可能是您最好的选择

如果您真的不想使用*ngIf，可以使用@ViewChild和ComponentFactoryResolver

在您的HTML

中

<!-- this is where your component will be rendered -->
<div #entry></div>

在您的组件中

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'
import { YourComponent } from ... // import the component you want to inject 
// ...

export class ...
  @ViewChild('entry', {read: ViewContainerRef, static: true }) entry: ViewContainerRef;

  constructor(
    private _resolver: ComponentFactoryResolver
  ) {}

  showComponent() {
     const factory = this._resolver.resolveComponentFactory(YourComponent);
     // this will insert your component onto the page
     const component = this.entry.createComponent(factory);
  }

  // and if you want to dynamically remove the created component you can do this

  removeComponent() {
     this.entry.clear();
  }

如何通过使用innerHTML添加组件来呈现组件？

2 个答案: