Question

我希望能够选择在我的可重用Angular表组件的行中添加icons / progress-bar，但是我很难实现它。我已经尝试在table.component.html中添加ng-content，但是这只会预测一次内容。我该如何处理？

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)">
                {{col.header}}
                <input type="text"
                class="ds-c-field"
                [(ngModel)]=fields[col.prop] 
                (click)="selectColInput(col.prop, $event)"
                *ngIf=col.enableFilter/>
                <img 
                class="arrow"
                *ngIf="col.enableSort && col.prop === selectedColHeader"
                [src]="direction === 'asc' ? upArrowPath : downArrowPath"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data">
        <tr>
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
                <ng-content></ng-content> 
                //icon projected here
            </td>
        </tr>
    </tbody>
</table>

app.component.html

<app-data-table [data]=data [cols]=cols>
    <img src="#"/> //custom icon or progress-bar here
</app-data-table>

Answer 1

我认为您正在寻找ngTemplateOutlet

定制table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                {{col.prop}}
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of rows">
        <tr>
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
                <ng-container *ngTemplateOutlet="cellTemplate"></ng-container>
            </td>
        </tr>
    </tbody>
</table>

定制table.component.ts

@Input() cellTemplate: TemplateRef<any>;

然后在父组件中做，例如app.component.html

<app-custom-table [cellTemplate]="cellTemplate">
  <ng-template #cellTemplate>
    <div> custom content </div> <!-- Inject content as you like -->
  </ng-template>
</app-custom-table>

就是这样。您可以在stackblitz

中查看示例代码

有关ngTemplateOutlet，ng-container和ng-template的更多信息，请参阅这篇精彩文章https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

将自定义图像添加到可重用的Angular组件

1 个答案: