将角度管道绑定到动态创建的HTML元素

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: `
    <div *ngFor="let item of items">
      <p>{{ item | uppercase }}</p>
    </div>
  `,
})
export class DynamicComponent {
  items: string[] = ['apple', 'banana', 'cherry'];
}

import { Component, ComponentFactoryResolver, ViewContainerRef, OnInit } from '@angular/core';
import { DynamicComponent } from './dynamic-component.component';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="createDynamicComponent()">Create Dynamic Component</button>
      <div #container></div>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit() {
    // 初始化
  }

  createDynamicComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    componentRef.instance.items = ['orange', 'pear', 'grape'];
  }
}