angular - Angular6 嵌入/内容投影：更好地包装 html

Question

我想始终使用默认值<ng-content>和可选的命名 ng-content来呈现我相当简单的组件。如果那个命名的 ng-content 存在，它应该被附加的 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>

→ 有没有更好的方法，只与一个参考/属性相处？

Answer 1

你可以做一个辅助空指令并使用 ContentChild 查询它

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

那么只<h2 two>需要使用该组件