如何使不同MAT-TAB共享相同的HTML代码
如何使不同MAT-TAB共享相同的HTML代码
提问于 2019-10-22 01:24:23
我在一个mat-tab-group中设置了一组mat-tab，问题是它们都共享一个表格的相同HTML码，这个表格是通过我在标签点击事件上捕获的函数动态填充的。
下面是一些代码。
<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
<mat-tab label="A">
<HTML CODE>
</mat-tab>
<mat-tab label="B">
<HTML CODE>
</mat-tab>
<mat-tab label="C">
<HTML CODE>
</mat-tab>
</mat-tab-group>因为我已经用这个函数填充了选项卡，
tabClick(event: any) {
console.log(event.index);
switch (event.index) {
case 0:
this.populateA('','1','999999');
console.log('Author');
break;
case 1:
this.populateB('','1','999999');
console.log('Form');
break;
case 2:
this.populateC('','1','999999');
console.log('Location');
break;
}正如您所看到的，不需要多次编写HTML，我如何为所有选项卡共享相同的代码，伪代码将如下所示，
<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
<mat-tab label="A">
<mat-tab label="B">
<mat-tab label="C">
<HTML CODE>
</mat-tab>
</mat-tab>
</mat-tab>
</mat-tab-group>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-22 01:33:51
您可以使用ng-template来执行以下操作：
<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
<mat-tab label="A">
<ng-container *ngTemplateOutlet="tabContent"></ng-container>
</mat-tab>
<mat-tab label="B">
<ng-container *ngTemplateOutlet="tabContent"></ng-container>
</mat-tab>
<mat-tab label="C">
<ng-container *ngTemplateOutlet="tabContent"></ng-container>
</mat-tab>
</mat-tab-group>
<ng-template #tabContent >
<HTML CODE>
</ng-template>编辑：
一个带答案的工作https://stackblitz.com/edit/angular-yqdsr6。
使用多个mat-paginator时，您必须使用@ViewChild而不是@ViewChild
我还必须调整您的app.module.ts中的导入
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58491332
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号