来自ng-content的参考组件变量

CJe*_*CJe 5 angularjs angular2-ngcontent angular

我有以下标记:

<group-header [isOpen]="true">
    <div *ngIf="isOpen">{{'PRICE' | resource}}</div>
</group-header>
Run Code Online (Sandbox Code Playgroud)

group-header的模板如下所示:

<div (click)="toggleGroups($event);">
    <ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)

isOpen在我的group-header组件中定义如下:

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

get isOpen() {
    return this._isOpen;
}
Run Code Online (Sandbox Code Playgroud)

显然我无法引用isOpen我想要的方式(或根本不是),因为我的'PRICE'资源永远不会显示.

有没有办法根据我的组件上的字段有条件地显示我的ng-content呈现内容?

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

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

Gün*_*uer 7

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

<group-header [isOpen]="true" #gh>
    <div *ngIf="gh.isOpen">{{'PRICE' | resource}}</div>
</group-header>
Run Code Online (Sandbox Code Playgroud)

  • 啊,当然.傻我.`isOpen`引用`group-header`的父组件,而不是group-header本身.添加`gh.确保引用group-header组件 (2认同)