Angular 2:如何从组件中读取延迟加载模块的路由
Angular 2: How to read a lazy-loaded Module's routes from within a Component
我正在开发一个分为多个模块的应用程序,这些模块是延迟加载的。在每个模块上:
- 我定义了一组子路由。
- 有一个"base"组件有一个
<router-outlet>
加载对应的组件,根据当前路由
我想从该基础组件访问与该模块对应的所有子路由及其 "data" 属性。
这是一个简单的例子。你可以在 this StackBlitz.
上看到它的直播
app.component.html
<router-outlet></router-outlet>
app-routing.module.ts
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'general'
},
{
path: 'films',
loadChildren: './films/films.module#FilmsModule'
},
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
films.component.ts
@Component({
selector: 'app-films',
templateUrl: './films.component.html',
styleUrls: ['./films.component.css']
})
export class FilmsComponent implements OnInit {
constructor() { }
ngOnInit() {
// I'd like to have access to the routes here
}
}
films.component.html
<p>Some other component here that uses the information from the routes</p>
<router-outlet></router-outlet>
电影-routing.module.ts
const filmRoutes: Routes = [
{
path: '',
component: FilmsComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: 'action' },
{ path: 'action',
component: ActionComponent,
data: { name: 'Action' } // <-- I need this information in FilmsComponent
},
{
path: 'drama',
component: DramaComponent,
data: { name: 'Drama' } // <-- I need this information in FilmsComponent
},
]
},
];
@NgModule({
imports: [
RouterModule.forChild(filmRoutes)
],
exports: [
RouterModule
],
})
export class FilmsRoutingModule { }
有没有办法从同一模块的组件中获取子路由的数据属性?
我已经尝试将 Router
和 ActivatedRoute
注入到组件中,但其中 none 似乎具有我需要的信息。
您可以通过router.config阅读路线:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-films',
templateUrl: './films.component.html',
styleUrls: ['./films.component.css']
})
export class FilmsComponent implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit() {
console.log(this.router);
}
}
里面不会有延迟加载的路由。
试试这个
constructor(private route: ActivatedRoute) {
console.log(this.route.routeConfig.children);
}
我正在开发一个分为多个模块的应用程序,这些模块是延迟加载的。在每个模块上:
- 我定义了一组子路由。
- 有一个"base"组件有一个
<router-outlet>
加载对应的组件,根据当前路由
我想从该基础组件访问与该模块对应的所有子路由及其 "data" 属性。
这是一个简单的例子。你可以在 this StackBlitz.
上看到它的直播app.component.html
<router-outlet></router-outlet>
app-routing.module.ts
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'general'
},
{
path: 'films',
loadChildren: './films/films.module#FilmsModule'
},
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
films.component.ts
@Component({
selector: 'app-films',
templateUrl: './films.component.html',
styleUrls: ['./films.component.css']
})
export class FilmsComponent implements OnInit {
constructor() { }
ngOnInit() {
// I'd like to have access to the routes here
}
}
films.component.html
<p>Some other component here that uses the information from the routes</p>
<router-outlet></router-outlet>
电影-routing.module.ts
const filmRoutes: Routes = [
{
path: '',
component: FilmsComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: 'action' },
{ path: 'action',
component: ActionComponent,
data: { name: 'Action' } // <-- I need this information in FilmsComponent
},
{
path: 'drama',
component: DramaComponent,
data: { name: 'Drama' } // <-- I need this information in FilmsComponent
},
]
},
];
@NgModule({
imports: [
RouterModule.forChild(filmRoutes)
],
exports: [
RouterModule
],
})
export class FilmsRoutingModule { }
有没有办法从同一模块的组件中获取子路由的数据属性?
我已经尝试将 Router
和 ActivatedRoute
注入到组件中,但其中 none 似乎具有我需要的信息。
您可以通过router.config阅读路线:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-films',
templateUrl: './films.component.html',
styleUrls: ['./films.component.css']
})
export class FilmsComponent implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit() {
console.log(this.router);
}
}
里面不会有延迟加载的路由。
试试这个
constructor(private route: ActivatedRoute) {
console.log(this.route.routeConfig.children);
}