来自 ng-content 的引用组件变量答案

【问题标题】：reference component variable from ng-content来自 ng-content 的引用组件变量
【发布时间】：2017-02-24 12:53:41
【问题描述】：

我有以下标记：

<group-header [isOpen]="true">
    <div *ngIf="isOpen">{{'PRICE' | resource}}</div>
</group-header>

group-header 的模板如下所示：

<div (click)="toggleGroups($event);">
    <ng-content></ng-content>
</div>

isOpen 在我的组头组件中定义如下：

@Input()
set isOpen(value: boolean) {
    this._isOpen = value;
}

get isOpen() {
    return this._isOpen;
}

显然，我无法以我想要的方式（或根本就这件事）引用 isOpen，因为我的“PRICE”资源永远不会显示。

有没有办法让我的 ng-content 渲染内容根据组件上的字段有条件地显示？

希望这一切都有意义......如果不是，请询问

编辑：根据@PierreDuc 的评论添加了 setter :-)

【问题讨论】：

【解决方案1】：

您可以使用模板变量来引用GroupHeader 组件：

<group-header [isOpen]="true" #gh>
    <div *ngIf="gh.isOpen">{{'PRICE' | resource}}</div>
</group-header>

【讨论】：