angularjs - 从 ng-content 引用组件变量

标签 angularjs angular angular2-ngcontent

我有以下标记:

<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 :-)

最佳答案

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

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

关于angularjs - 从 ng-content 引用组件变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42439189/

相关文章:

angular - Angular 6 中的所有 angular.json 选项是什么?

angular - for循环中的ng内容

angular - 在 Angular 2 中捕获有关 ng-content 的事件

Angular Material 2如何在编辑后更新表格数据而不刷新页面?

angular - Angular 4/5 中的条件 ng-content

testing - AngularJS E2E 测试的执行顺序

javascript - 添加自动翻译到 angular-ui-grid 标题

javascript - Angularjs 到 angular4 到 angularjs

javascript - 防止 $watchCollection 在 init 时触发

angular - 如何在 Angular 4 中实现 OpenID