如何使用组件作为 Angular 中另一个组件的输入数据?
例如:
我想要构建表格组件 AppTableComponent:
<app-table [dataSource]="dataSource" [columns]="columns">
<ng-container tableColumnDef="actions">
<a routerLink="/model/edit/{{item.id}}" routerLinkActive="active">Edit</a>
<a routerLink="/model/delete/{{item.id}}" routerLinkActive="active">Delete</a>
</ng-container>
<ng-container tableColumnDef="isActive">
<div [ngClass]="{cercl:true, 'is-active':item.is_active}"> </div>
</ng-container>
</app-table>
dataSource
是类似于 Model[]
或 Person[]
或 Car[]
的数据数组总和。 columns
是一个字符串数组,如 ['id', 'isActive', 'name', 'actions']
。它应该包含数据源行属性名称或附加列名称。
我知道如何使用 ng-content
但这不是相同的情况。不同之处在于我应该在连续的地方使用部分内容。也许我应该使用 ng-contet,但我不知道。
我确信我的目标是可行的,因为 Angular Material 表是这样工作的:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="position"></ng-container>
<ng-container matColumnDef="weight"></ng-container>
</mat-table>
请不要建议我使用 Angular Material 表组件。我不需要 table 。我只是想学习一些新东西。
我将非常感谢有关该主题的任何信息或文章!
最佳答案
如果你想在消费者部分管理模板,那么你必须使用 Angular 嵌入式 View (ng-template
)。这就是 Material 在其表实现中使用的内容。
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
你可以说没有任何嵌入式 View ,但让我们看看上面模板的扩展版本:
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<ng-template matHeaderCellDef>
<th mat-header-cell> No. </th>
</ng-template>
<ng-template matCellDef let-element="$implicit">
<td mat-cell> {{element.position}} </td>
</ng-template>
</ng-container>
我们可以注意到<ng-template matHeaderCellDef>
here 可以通过使用 ContentChild
获得.
Angular Material 团队为此类模板创建专用指令 https://github.com/angular/material2/blob/f2c7205d6608d36a2016d90090be2a78d4f3233e/src/lib/table/cell.ts#L32保留对嵌入式模板的引用 https://github.com/angular/material2/blob/676ce3b285718d2ee19ad6ae5702917566167641/src/cdk/table/cell.ts#L34
Material 表组件的模板如下:
<ng-container headerRowOutlet></ng-container>
<ng-container rowOutlet></ng-container>
<ng-container footerRowOutlet></ng-container>
还有指令助手,例如:
@Directive({selector: '[headerRowOutlet]'})
export class HeaderRowOutlet implements RowOutlet {
constructor(public viewContainer: ViewContainerRef,
public elementRef: ElementRef) { }
}
这样我们就可以使用低级 API 来创建基于嵌入式模板的元素,例如 ViewContainerRef.createEmbeddedView(templateRef)
但可以在这里找到简单的实现:
关于 Angular 2+ : Use component as input in another component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53113054/