Làm thế nào để bạn chèn một view nhúng từ một TemplateRef đã được chuẩn bị?

Để chèn một view nhúng từ một TemplateRef đã được chuẩn bị trong Angular, bạn có thể sử dụng ViewContainerRef để tạo và quản lý các view trong container view. Dưới đây là các bước thực hiện:

1. Truy cập ViewContainerRef: Đầu tiên, bạn cần truy cập vào ViewContainerRef của container mà bạn muốn chèn view nhúng vào. Bạn có thể sử dụng @ViewChild hoặc @ViewChildren để truy cập ViewContainerRef thông qua một tham chiếu đến một element hoặc directive.

2. Sử dụng TemplateRef: Sau khi có TemplateRef mà bạn muốn chèn, bạn cần truyền nó vào phương thức createEmbeddedView của ViewContainerRef để tạo một view nhúng.

Ví dụ:

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

@Component({
  selector: 'my-app',
  template: `
    <ng-template #myTemplate>
      <div>Content from template</div>
    </ng-template>
    <div #container></div>
  `,
})
export class AppComponent {
  @ViewChild('myTemplate') myTemplateRef: TemplateRef<any>;
  @ViewChild('container', { read: ViewContainerRef }) containerRef: ViewContainerRef;

  ngAfterViewInit() {
    this.containerRef.createEmbeddedView(this.myTemplateRef);
  }
}

Trong ví dụ trên:

• @ViewChild('myTemplate') được sử dụng để truy cập TemplateRef thông qua tham chiếu #myTemplate trong template.
• @ViewChild('container', { read: ViewContainerRef }) được sử dụng để truy cập ViewContainerRef của element <div #container></div>.
• Phương thức createEmbeddedView của ViewContainerRef được gọi với TemplateRef như một đối số để chèn view nhúng vào container.

Như vậy, bạn có thể chèn một view nhúng từ một TemplateRef đã được chuẩn bị bằng cách sử dụng ViewContainerRef và phương thức createEmbeddedView.