只能为一个组件分配一条路线,您可以做的是添加一个父组件,其中包含DataSummaryComponent & AskSummaryComponent
并在路由中进行配置。
Update:
正如评论中提到的,您可以创建一个通用组件,它使用路由中的数据属性配置动态加载组件,
路由配置
const appRoutes: Routes = [
{ path: '', redirectTo: '/route1', pathMatch: 'full' },
{ path: 'route1', component: MasterComponent, data: {puppets : [PuppetComponent1]} },
{ path: 'route2', component: MasterComponent, data: {puppets : [PuppetComponent2, PuppetComponent3]}},
{ path: 'route3', component: MasterComponent, data: {puppets : [PuppetComponent1, PuppetComponent2, PuppetComponent4]}}
];
主组件
@Component({
template: `<h1>I am the Master of components</h1>
<hr />
<div #puppetContainer></div>
`
})
class MasterComponent {
@ViewChild('puppetContainer', { read: ViewContainerRef }) puppetContainer: ViewContainerRef;
constructor(
private router: Router,
private route: ActivatedRoute,
private _componentFactoryResolver: ComponentFactoryResolver,
private viewContainer: ViewContainerRef) {
}
ngOnInit(){
this.route.data
.subscribe(data => {
if(!!data && !!data.puppets && data.puppets.length > 0){
data.puppets.map(puppet => {
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(puppet);
this.puppetContainer.createComponent(componentFactory);
});
}
});
}
}
检查这个笨蛋!!
希望这可以帮助!!