问题
I have a mat-tab-group (angular material) and I want to be able to add from code behind mat-tabs including other components. I am using ComponentFactoryResolver to create the component but I am not able to add the new component to the new mat-tab through the ViewContainerRef
html
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs" [label]="tab.title">
<div #test></div>
</mat-tab>
</mat-tab-group>
code behind
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);
}
回答1:
Wanted to share what I came up with, in case it helps anyone else:
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);
}
}
Template:
<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>
回答2:
I also replaced the BrowserAnimationsModule and used NoopAnimationsModule instead.
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);
}
}
The Template
<mat-tab label="Tab" *ngFor="let component of components">
<ng-template matTabContent>
<div #container></div>
</ng-template>
</mat-tab>
</mat-tab-group>
The Module
imports: [
CommonModule,
MaterialModuleSet,
BrowserModule,
RouterModule.forRoot(routes),
AppRoutingModule,
NoopAnimationsModule
// BrowserAnimationsModule] removed the BrowserAnimationModule
来源:https://stackoverflow.com/questions/52498869/angular-dynamic-component-in-mat-tab