在Angular中,可以使用路由参数来实现"不同的组件,同一路由"的效果。以下是一个包含代码示例的解决方法:
const routes: Routes = [
{ path: 'example/:component', component: ExampleComponent }
];
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent implements OnInit {
selectedComponent: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
const component = params['component'];
switch (component) {
case 'component1':
this.selectedComponent = Component1Component;
break;
case 'component2':
this.selectedComponent = Component2Component;
break;
// Add more cases for additional components
default:
this.selectedComponent = NotFoundComponent;
break;
}
});
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-component1',
template: 'Component 1
'
})
export class Component1Component {}
@Component({
selector: 'app-component2',
template: 'Component 2
'
})
export class Component2Component {}
@Component({
selector: 'app-not-found',
template: 'Not Found
'
})
export class NotFoundComponent {}
这样,当路由为example/component1
时,Component1Component
将会被加载;当路由为example/component2
时,Component2Component
将会被加载;当路由为其他值时,NotFoundComponent
将会被加载。
注意:为了使用动态组件,请确保在模块中导入并声明了这些组件,并且在路由模块中正确配置了路由路径。
上一篇:不同的组件调用方式
下一篇:不同的祖先列表 C#