如何在angular中动态组合路由?
How to dynamically compose a route in angular?
假设我有一项服务可以获取格式为 json 的路径数组,如下所示:
[{
"path": "routeName"
"component": "MyComponent"
}]
当然 "MyComponent" 作为字符串检索。现在我想将此数组转换为路由模块的路由。如何将 "MyComponent" 转换为 class MyComponent?
这样做的目的是让我的前端不知道它是什么。要添加新的路由和组件,我只需要在服务器上的文件中添加一个新条目,并使其与我在 angular 应用程序中创建的组件名称相匹配。
第 1 步:将路由器注入应用程序模块
第 2 步:您可以根据需要更改 router.config
@
NgModule({
declarations: [
HomeComponent
...
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '**', redirectTo: 'home' }
])
],
providers: []})
export class AppModule {
constructor(router: Router) {
router.config.unshift({ path: 'new_path', component: NewComponent });
}}
这是应用模块
export const routes: Route[] = [
];
@NgModule({
declarations: [
AppComponent,
ErrorHandleComponent,
FilterComponent,
CreateComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
// AppRoutingModule,
HttpClientModule
],
entryComponents: [
CreateComponent,
FilterComponent,
ErrorHandleComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在确保您拥有 returns 组件对应键的键值对 obj,例如:
import { CreateComponent } from '../create/create.component';
import { FilterComponent } from '../filter/filter.component';
import { ErrorHandleComponent } from '../error-handle/error-handle.component';
export const components = {
'CreateComponent': CreateComponent,
'FilterComponent': FilterComponent,
'ErrorHandleComponent': ErrorHandleComponent,
};
然后将此代码放入 app.component.ts 文件
constructor(private api: ApiService, private router: Router) {
}
getRoute() {
this.api.get_route().subscribe(res => {
res.forEach(element => {
// components key value pair obj
element.component = components[element.component];
routes.push(element);
});
this.rlist = routes;
this.router.resetConfig(routes);
});
假设我有一项服务可以获取格式为 json 的路径数组,如下所示:
[{
"path": "routeName"
"component": "MyComponent"
}]
当然 "MyComponent" 作为字符串检索。现在我想将此数组转换为路由模块的路由。如何将 "MyComponent" 转换为 class MyComponent?
这样做的目的是让我的前端不知道它是什么。要添加新的路由和组件,我只需要在服务器上的文件中添加一个新条目,并使其与我在 angular 应用程序中创建的组件名称相匹配。
第 1 步:将路由器注入应用程序模块
第 2 步:您可以根据需要更改 router.config
@
NgModule({
declarations: [
HomeComponent
...
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '**', redirectTo: 'home' }
])
],
providers: []})
export class AppModule {
constructor(router: Router) {
router.config.unshift({ path: 'new_path', component: NewComponent });
}}
这是应用模块
export const routes: Route[] = [
];
@NgModule({
declarations: [
AppComponent,
ErrorHandleComponent,
FilterComponent,
CreateComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
// AppRoutingModule,
HttpClientModule
],
entryComponents: [
CreateComponent,
FilterComponent,
ErrorHandleComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在确保您拥有 returns 组件对应键的键值对 obj,例如:
import { CreateComponent } from '../create/create.component';
import { FilterComponent } from '../filter/filter.component';
import { ErrorHandleComponent } from '../error-handle/error-handle.component';
export const components = {
'CreateComponent': CreateComponent,
'FilterComponent': FilterComponent,
'ErrorHandleComponent': ErrorHandleComponent,
};
然后将此代码放入 app.component.ts 文件
constructor(private api: ApiService, private router: Router) {
}
getRoute() {
this.api.get_route().subscribe(res => {
res.forEach(element => {
// components key value pair obj
element.component = components[element.component];
routes.push(element);
});
this.rlist = routes;
this.router.resetConfig(routes);
});