在angular组件中，如何以编程方式将模板追加到各个位置

<div #target></div>

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

@ViewChild('target', {read: ElementRef}) target: ElementRef;

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('target', {read: ElementRef}) target: ElementRef;

  constructor(private renderer: Renderer2) {}

  appendTemplate() {
    const newElement = this.renderer.createElement('div');
    const text = this.renderer.createText('This is a dynamically appended template.');

    this.renderer.appendChild(newElement, text);
    this.renderer.appendChild(this.target.nativeElement, newElement);
  }
}

<button (click)="appendTemplate()">Append Template</button>