经测试,动态创建组件和路由有干扰,去掉路由后动态创建组件工作正常。
dynamic-create.service.ts
这个服务可以在任何容器内创建任何组件。创建之前会清空容器。
import { Injectable, ViewContainerRef, ComponentFactory, ComponentRef, ComponentFactoryResolver, Type } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DynamicCreateService {
constructor(private resolver: ComponentFactoryResolver) { }
createComponent<componentType>(container: ViewContainerRef, component: Type<componentType>): ComponentRef<componentType> {
container.clear();
const factory: ComponentFactory<componentType> =
this.resolver.resolveComponentFactory<componentType>(component);
return container.createComponent(factory);
}
}
用法:
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('viewContainer', { read: ViewContainerRef }) container: ViewContainerRef;
componentRef: ComponentRef<any>;
constructor(
private dcs: DynamicCreateService,
) {
}
ngAfterViewInit(): void {
if (sessionStorage.getItem('userToken')) {
this.createHomePage();
} else {
this.createLoginPage();
}
}
createLoginPage() {
this.componentRef = this.dcs.createComponent(this.container, LoginComponent);
(this.componentRef.instance as LoginComponent).login.subscribe(() => this.createHomePage());
}
createHomePage() {
this.componentRef = this.dcs.createComponent(this.container, HomeComponent);
}
}
app.component.html
<ng-template #viewContainer></ng-template>