Frontender Libs - обзор библиотек JS / CSS

Динамическое управление представлениями

EmbeddedViewRef - это ссылка на конкретный экземпляр представления, созданный из TemplateRef. В отличие от ComponentRef, он относится к шаблону (<ng-template>), что позволяет динамически отображать пользовательский интерфейс.

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

@Component({
  selector: 'app-example',
  template: `
    <ng-template #t><div>Шаблон</div></ng-template>
    <div #c></div>
    <button (click)="create()">Создать</button>
  `,
})
export class ExampleComponent {
  @ViewChild('t', { read: TemplateRef }) tRef!: TemplateRef<any>;
  @ViewChild('c', { read: ViewContainerRef }) cRef!: ViewContainerRef;

  create() {
    this.cRef.createEmbeddedView(this.tRef);
  }
}

Пример: @ViewChild получает TemplateRef (tRef) и ViewContainerRef (cRef). createEmbeddedView создает и вставляет шаблон.

👉 @sWebDev

👍3

www.tgoop.com/sWebDev/3633

1.06K viewsApr 7 at 08:11

Динамическое управление представлениями

EmbeddedViewRef - это ссылка на конкретный экземпляр представления, созданный из TemplateRef. В отличие от ComponentRef, он относится к шаблону (<ng-template>), что позволяет динамически отображать пользовательский интерфейс.

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

@Component({
  selector: 'app-example',
  template: `
    <ng-template #t><div>Шаблон</div></ng-template>
    <div #c></div>
    <button (click)="create()">Создать</button>
  `,
})
export class ExampleComponent {
  @ViewChild('t', { read: TemplateRef }) tRef!: TemplateRef<any>;
  @ViewChild('c', { read: ViewContainerRef }) cRef!: ViewContainerRef;

  create() {
    this.cRef.createEmbeddedView(this.tRef);
  }
}

BY Frontender Libs - обзор библиотек JS / CSS