在Angular 8中,可以使用RouterModule
和Route
来动态添加子路由。下面是一个示例解决方案:
@angular/router
模块:npm install @angular/router --save
RouterModule
和Route
:import { RouterModule, Route } from '@angular/router';
const childRoutes: Route[] = [];
childRoutes.push()
来添加子路由:function addChildRoute(route: Route) {
childRoutes.push(route);
}
imports
数组中添加RouterModule.forRoot(childRoutes)
来导入子路由:@NgModule({
imports: [
// ...
RouterModule.forRoot(childRoutes)
],
// ...
})
export class AppModule { }
addChildRoute()
函数来动态添加子路由。以下是一个示例组件:import { Component } from '@angular/core';
import { addChildRoute } from './app.module';
@Component({
selector: 'app-root',
template: `
Parent Component
`,
})
export class AppComponent {
addChild() {
const childRoute: Route = {
path: 'child',
component: ChildComponent
};
addChildRoute(childRoute);
}
}
@Component({
selector: 'app-child',
template: `Child Component
`
})
export class ChildComponent { }
在上面的示例中,当点击"Add Child Route"按钮时,将会调用addChild()
函数来动态添加一个子路由。子路由的路径为child
,并且使用ChildComponent
作为组件。
注意:在实际使用中,你可能需要根据你的项目结构和需求来调整上述示例。