Декораторы @ContentChild, @ContentChildren, @ViewChildren, @ViewChild и TemplateOutlet с ng-container в Angular

Oct 28, 2018

View и Content

View - это шаблон компонента.

Content - внутри компонента вы имеете возможность прописывать контент:

<my-item>
    Content
</my-item>

Доступ к контенту компонента можно получить через ng-content. Если контент сложный, то мы можем обращаться к нему через css-селекторы.

<!-- app.component.html -->
<my-item>
    <ng-content selector="h1"></ng-content>
</my-item>

Что проинициализируется раньше - View или Content?

ngAfterViewInit() {
        // 2-й
        console.log('ngAfterViewInit');
    }

    ngAfterContentInit() {
        // 1-й
        console.log('ngAfterContentInit');
    }

Content идет первым, так как View для компиляции может использовать Content.

Декоратор @ContentChild

Декоратор @ContentChild используется для того чтобы мы могли работать с контентом в компоненте.

С контентом можно начать работате в хуке - AfterContentInit

<!-- app.component.html -->
<my-item>

    <ng-content selector="h1"></ng-content>

    <p #p >Content</p>

    <app-other></app-other>

</my-item>
// my-item.component.ts
@ContentChild('p') paragraphEl: ElementRef;                 // получаем p по ссылке
@ContentChild(OtherComponent) compOther: OtherComponent;    // получаем по селектору Класса компонента

Декоратор @ContentChildren

Декоратор @ContentChildren - работает аналогично декоратору @ContentChild, но вместо одного компонента будет, например, QueryList<OtherComponent>

@ContentChild(OtherComponent, { read: OtherComponent }) compOther: OtherComponent;

Свойством read мы подчеркиваем, что нам нужен OtherComponent, а не, допустим ElementRef.

@ViewChildren и @ViewChild

@ViewChildren и @ViewChild работают лишь с теми компонентами, которые находятся непосредственно в шаблоне.

ngTemplateOutlet и ng-container

*ngTemplateOutlet (структурная директива) - используется для динамической гинерации контента. Может применяться на ng-container, чтобы вывести какой-либо шаблон (шаблон может передаваться по ссылке).

<ng-template #t>
    <h1>
        заголовк
    </h1>
    <p>
        контент
    </p>
</ng-template>

<ng-container *ngTemplateOutlet="t"></ng-container>
Добавить комментарий