單擊按鈕時創建一個組件，Angular 13

Question

當我使用 Angular 單擊按鈕時如何創建組件 13 我嘗試的方法是使用 ViewChild 和 ComponentFactoryResolver 仍然感到困惑 還有沒有其他方法

import {
  Component,
  OnInit,
  TemplateRef,
  ViewChild,
  AfterViewInit,
  Inject,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentRef,
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild('appenHere', {static : false, read : ViewContainerRef}) target: ViewContainerRef;
  private componentRef: ComponentRef<any>;

  constructor(private resolver: ComponentFactoryResolver) { }

  addNewComponent() {
    let childComponent = this.resolver.resolveComponentFactory(NewTileComponent);
    this.componentRef = this.target.createComponent(childComponent); // <-- here it's throws an error!
  } 
}

Answer 1

對於 Angular v13 及更高版本

在Angular v13中， ComponentResolveFactory被標記為已棄用，並將在v16中刪除。

引入了動態創建組件的新方法。

這是一個代碼示例：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild('appenHere', {static : false, read : ViewContainerRef}) target: ViewContainerRef;

  constructor() { }

  addNewComponent() {
    this.target.createComponent(NewTileComponent);
  } 
}