Получение шаблонов через ContentChildren и TemplateRef

Параметр read: TemplateRef в декораторе ContentChildren позволяет получить доступ именно к шаблонам, переданным в компонент через <ng-content>, что важно, когда требуется отрисовать вложенные ng-template вручную, а не просто вставить контент. Angular по умолчанию ищет компоненты, но при указании read можно получить доступ к объектам TemplateRef.

import { Component, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'template-container',
  template: `<ng-container *ngTemplateOutlet="templates[0]"></ng-container>`,
})
export class TemplateContainerComponent implements AfterContentInit {
  @ContentChildren(TemplateRef, { read: TemplateRef }) templates!: QueryList<TemplateRef<any>>;

  ngAfterContentInit() {
    console.log('Шаблонов передано:', this.templates.length);
  }
}

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

Получение шаблонов через ContentChildren и TemplateRef

Параметр read: TemplateRef в декораторе ContentChildren позволяет получить доступ именно к шаблонам, переданным в компонент через <ng-content>, что важно, когда требуется отрисовать вложенные ng-template вручную, а не просто вставить контент. Angular по умолчанию ищет компоненты, но при указании read можно получить доступ к объектам TemplateRef.

import { Component, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'template-container',
  template: `<ng-container *ngTemplateOutlet="templates[0]"></ng-container>`,
})
export class TemplateContainerComponent implements AfterContentInit {
  @ContentChildren(TemplateRef, { read: TemplateRef }) templates!: QueryList<TemplateRef<any>>;

  ngAfterContentInit() {
    console.log('Шаблонов передано:', this.templates.length);
  }
}

В примере компонент получает все ng-template, переданные в него, и может использовать любой шаблон вручную.

👉 @sWebDev

hottg.com/sWebDev/3761

820 viewsJun 2 at 08:11