Angular 角度2:如何读取延迟加载的模块';从组件中删除路由

Angular 角度2:如何读取延迟加载的模块';从组件中删除路由,angular,angular2-routing,Angular,Angular2 Routing,我正在开发一个分为多个模块的应用程序,这些模块都是延迟加载的。在每个模块上: 我定义了一组子路由 有一个“基本”组件,它有一个,根据当前路由加载相应的组件 我希望能够从该基本组件访问与模块对应的所有子路由及其“数据”属性 下面是一个简单的例子。你可以在电视上看到它 app.component.html <router-outlet></router-outlet> <p>Some other component here that uses the in

我正在开发一个分为多个模块的应用程序,这些模块都是延迟加载的。在每个模块上:

  • 我定义了一组子路由
  • 有一个“基本”组件,它有一个
    ,根据当前路由加载相应的组件
我希望能够从该基本组件访问与模块对应的所有子路由及其“数据”属性

下面是一个简单的例子。你可以在电视上看到它

app.component.html

<router-outlet></router-outlet>
<p>Some other component here that uses the information from the routes</p>
<router-outlet></router-outlet>
胶片.组件.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 { }
@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
  }
}
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 { }
films.component.html

<router-outlet></router-outlet>
<p>Some other component here that uses the information from the routes</p>
<router-outlet></router-outlet>
此处使用路由信息的其他组件

胶片路由.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 { }
@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
  }
}
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 { }
const filmRoutes:Routes=[
{
路径:“”,
组件:电影组件,
儿童:[
{路径:'',路径匹配:'full',重定向到:'action'},
{路径:'操作',
组件:ActionComponent,

数据:{name:'Action'}/您可以使用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);
 }