我有一个 mat-tab-group ( Angular Material ),我希望能够从 mat-tabs 后面的代码添加,包括其他组件。我正在使用 ComponentFactoryResolver 创建组件,但无法通过 ViewContainerRef 将新组件添加到新的 mat-tab
html
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs" [label]="tab.title">
<div #test></div>
</mat-tab>
</mat-tab-group>
隐藏代码
private open(type:string):void{
var tab = {title:'test'};
this.tabs.push(tab);
const factory = this.componentFactoryResolver.resolveComponentFactory(DiscountGridComponent );
//this will add it in the end of the view
const newComponentRef = this.viewContainerRef.createComponent(factory);
}
最佳答案
想分享我的想法,以防对其他人有帮助:
export class DynamicTabComponent implements AfterViewInit {
public tabs = [ComponentOne, ComponentTwo];
@ViewChild('container', {read: ViewContainerRef, static: false}) public viewContainer: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
public ngAfterViewInit(): void {
this.renderComponent(0);
}
public tabChange(index: number) {
setTimeout(() => {
this.renderComponent(index);
});
}
private renderComponent(index: number) {
const factory = this.componentFactoryResolver.resolveComponentFactory(this.components[index]);
this.viewContainer.createComponent(factory);
}
}
模板:
<mat-tab-group (selectedIndexChange)="tabChange($event)">
<mat-tab label="Tab" *ngFor="let component of components">
<ng-template matTabContent>
<div #container></div>
</ng-template>
</mat-tab>
</mat-tab-group>
关于Angular - mat-tab 中的动态组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52498869/