时间戳

首页 > 解决方案 > 使上下文可用于传递给 ng-content 的模板

angular - 使上下文可用于传递给 ng-content 的模板

问题描述

我在 app.module.ts 中有 2 个模块，即

  1. status.module.ts 和
  2. 表.模块.ts

以下是我的表格组件：

<ngx-datatable class="material"
           [rows]="rows"
           [columns]="columns"
           [rowClass]="rowClass ? rowClass : null"
           [columnMode]="'force'"
           [headerHeight]="50"
           [footerHeight]="50"
           [rowHeight]="null"
           [limit]="10"
           [loadingIndicator]="loadingIndicator"
           [groupRowsBy]="groupRowsBy"
           [groupExpansionDefault]="groupExpansionDefault">

    <!-- Group Header Template -->
    <ngx-datatable-group-header *ngIf="groupRowsBy" >
        <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <ng-content></ng-content>
        </ng-template>
    </ngx-datatable-group-header>
</ngx-datatable>

现在我需要从 status.component.html 为 ng-content(in table.component.html) 传递以下内容：

<span>
    <button class="btn btn-link link" (click)="status.openStatus(group)">{{group.key}}</button>
</span>

这里的问题是在 status.component.html 中无法识别组，因为在 table.component.html 中声明了组

有没有办法让它工作？

标签： angular

解决方案

在状态组件中，创建模板引用变量 ( appTable) 为：

<app-table #appTable>
    <span>
        <button class="btn btn-link link" (click)="status.openStatus(appTable.Group)">{{appTable.Group.key}}</button>
    </span>
</app-table>

table.component 创建 setter 和 getter

_group: any;

set Group(value) {
    this._group = value;
}

get Group() {
    return this._group;
}

推荐阅读