如何解决如何在组件中重用有角度的材料表标题和样式？
我正在创建一个带有 angular 的站点，其中我有多个具有不同列的表。例如，一个表格显示带有复选框的东西，其他带有文本等等。但它们都共享相同的样式、标题和容器。
所以我的第一次尝试是使用以下 html 创建一个新组件：
<div class="component-container">
<ng-container *ngIf="isLoadingResults">
<app-loading-spinner></app-loading-spinner>
</ng-container>
<div class="table-container">
<table mat-table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-content></ng-content>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Empty dataset -->
<tr class="mat-row" *matNoDataRow [ngClass]="{'empty-dataset__hidden': isLoadingResults}" class="empty-dataset">
<td class="mat-cell" [colSpan]="displayedColumns.length">
<ng-container *ngIf="!errorLoadingResults">
<div class="empty-dataset__no_content">
<span>
{{emptyDatasetText ? emptyDatasetText : ""}}
</span>
</div>
</ng-container>
<ng-container *ngIf="errorLoadingResults">
<div class="empty-dataset__error">
<span >
{{errorGettingDatasetText ? errorGettingDatasetText : ""}}
</span>
</div>
</ng-container>
</td>
</tr>
</table>
</div>
</div>
而且我希望能够在 ng-content 中注入我的列：
<app-table-setting
[dataSource]="categories"
[displayedColumns]="displayedColumns"
[isLoadingResults]="isLoadingResults"
emptyDatasetText="No categories found."
errorGettingDatasetText="There was an error getting the categories."
>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let element">
<span class="mobile-label">ID: </span>
{{element.id}}
</td>
<span class="mobile-label">ID: </span>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element">
<span class="mobile-label">Name: </span>
{{element.name}}
<div *ngIf="element.parentCategory">
<span class='subtitle'><span>{{element.categoryName}}</span></span>
</div>
</td>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let element">
<span class="mobile-label">Description: </span>
{{element.description}}
</td>
</ng-container>
<!-- Symbol color -->
<ng-container matColumnDef="color">
<th mat-header-cell *matHeaderCellDef> Color </th>
<td mat-cell *matCellDef="let element">
<span class="mobile-label">Color: </span>
<mat-icon [ngStyle]="{'color': element.color}" class="icon">stop</mat-icon>
</td>
</ng-container>
<!-- Actions -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<span class="mobile-label">Actions: </span>
<div >
<button mat-icon-button color="accent" id="{{'edit:' + element.id}}">
<mat-icon class="icon" aria-label="Edit" (click)="onEditCategory(element.id)">edit</mat-icon>
</button>
<button mat-icon-button color="accent" id="{{'delete:' + element.id}}">
<mat-icon class="icon" (click)="onDeleteCategory(element.id,element.name)">delete</mat-icon>
</button>
</div>
</td>
</ng-container>
</app-table-setting>
是否有可能以可重用的方式获取该 html 而不会为每个组件复制它？
更新：为避免误解：
我有 n 个这样的组件：
Component 1：
table + styling
-> columns (with different bindings and actions,not just text)
-> Some default errors/warnings with empty table
我想要这个：
Component 1
table + styling
<ng-content>
-> Some default errors/warnings with empty table
component n
<app-component-1>
-> columns (with different bindings and actions,not just text)
</app-component-1>
Update2：我是第一次在 stackblitz 中创建项目，所以我希望每个人都可以访问。我有一个示例，如果我尝试在调用组件中放置一列 postion 列，第一个无法识别它。我想知道如何将其拆分为两个部分：
https://stackblitz.com/edit/angular-multi-component-table?file=src/app/app.component.html
解决方法
您需要具有不同列的同一个表，因此您需要动态传递显示列并且表仅呈现这些列。此外，您可以根据需要操作数据源和传递。我为您制作了一个演示。
,您可以按照以下模式将表格封装到具有属性和样式的组件中。
- 创建一个新组件，比如 TableSettingsComponent。
- 将 SCSS 样式复制到样式表文件 table-settings.component.scss 中。
- 将您的 HTML 表格复制到 HTML 文件 table-settings.component.html 中。
实现包含属性访问器和设置器的组件。
@Component({
selector: 'app-table-settings',templateUrl: './table-settings.component.html',styleUrls: ['./table-settings.component.scss']
})
export class TableSettingsComponent implements OnInit {
_dynamicColumns: any;
@Input("_dynamicColumns")
set _dynamicColumns(value: any)
{
this._dynamicColumns = value;
}
get dynamicColumns() { return this._dynamicColumns; }
...
}
在您的应用模块中，如下所示声明您的组件：
import { TableSettingsComponent } from '../components/table-settings.component.html';
@NgModule({
declarations: [
...
PaginationComponent,...
],imports: [
...
],exports:
[
...
PaginationComponent,...
]
})
export class AppModule { }
您现在应该能够在您的应用程序中重新使用包含在另一个主机（父）组件中的新（子）组件。例如，在应用程序根组件中，我们定义将用作子表设置组件的输入的列变量。在下面的示例中，我定义了一个字符串数组来保存列名：
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
_columnsValue: string[];
get columnsValue() { return this._columnsValue; }
ngOnInit()
{
_columnsValue = ['Column1','Column2','Column3'];
}
...
}
在父组件的 HTML (app.component.html) 中，重新使用上述组件，如下所示，将值传递给您的表组件列属性，如下所示：
<app-table-settings [dynamicColumns]="columnsValue">
</app-table-settings>
这只是一个可以扩展的基本结构。 您可以使用应用中的任何其他组件来托管新组件。
请尝试看看效果如何。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
