Трансклюзия / проекция контента Angular6: лучше при условии упаковки html - PullRequest
Новая
       87

Трансклюзия / проекция контента Angular6: лучше при условии упаковки html

0 голосов
/ 13 февраля 2020

Я хочу, чтобы мой довольно простой компонент всегда отображался по умолчанию <ng-content> и , необязательно с с именем ng-content. Если это именованное ng-содержимое существует, оно должно быть заключено в дополнительный html. Я нашел решение, но, к сожалению, мне нужны две ссылки на него:

app.component. html (где оно используется) 

<app-header>
    A minimal header
</app-header>
<hr>

<app-header>
    A full header
    <h2 #two two>a subhead</h2>
</app-header>

мой компонент 

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

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
    @ContentChild('two', {static: false}) twoRef: ElementRef;
}

header.component. html

<h4>default content</h4>
<ng-content>
</ng-content>

<h4>named contents</h4>

<div *ngIf="twoRef">
    <b style="color: purple">
        <ng-content select="[two]"></ng-content>
    </b>
</div>
<ng-template [ngIf]="twoRef">TWO exists B</ng-template>

Результат, как и ожидалось, но мне не нравятся два атрибута Мне нужно: 

<h2 #two two>

→ есть ли лучший способ ужиться только с одной ссылкой / атрибутом?

1 Ответ

1 голос
/ 13 февраля 2020

вы можете создать вспомогательную пустую директиву и запросить ее с помощью ContentChild 

@Directive({selector: '[two]'}) export class MyProjectionDirective {}
....
@ContentChild(MyProjectionDirective) ref: MyProjectionDirective;

, тогда для использования этого компонента

потребуется только <h2 two>
...