Angular 2 Injecting ActivatedRoute返回根路由

时间:2017-08-28 10:55:33

标签: angular router

我有以下路线导入到app模块:

// app.routing.ts
const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '', redirectTo: 'home', pathMatch: 'full'
      },
      {
        path: 'home', loadChildren: 'app/home/home.module#HomeModule'
      }
    ] 
  }
]

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

// app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {CoreModule} from './core/core.module';
import {routing} from './app.routing';
import {NgModule} from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

然后,在Home模块中,我有:

// home.routing.ts
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: {
      pageTitle: 'Home'
    }
  }
];
export const homeRoutes: ModuleWithProviders = RouterModule.forChild(routes);

// home.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HomeComponent} from './home.component';
import {homeRoutes} from './home.routing';

@NgModule({
  imports: [
    CommonModule,
    homeRoutes
  ],
  declarations: [HomeComponent]
})
export class HomeModule {
}

我希望路由获得data,我有HeaderComponent模块中的组件Layout。此模块不包含任何路由,只包含布局组件。我希望得到data

export class HeaderComponent implements OnInit {
   constructor(private activatedRoute: ActivatedRoute,
            private router: Router) {
   }

   ngOnInit() {
      this.activatedRoute.data
        .subscribe(d => {
         console.log(d);           
      });       
   }
}

但是,对象一直是空的。我注意到activatedRoute不同,它适用于MainLayoutComponent

enter image description here

为了准确了解我/home的路线,我必须两次去看孩子,我需要activatedRoute pageTitle data activatedRoute 1}}。

问题是,如何获得正确的MainLayoutComponent?我不想让孩子们循环,直到孩子们完成为止 PS。这是<app-header></app-header> <div class="container"> <div class="wrapper"> <router-outlet></router-outlet> </div> </div> 的模板:

newOb = {};
Array.forEach((o,i)=>{
If(i>(array.length-2)-1){
newOb.weekend == undefined? newOb.weekend=[o]:newOb.weekend.push(o);}
else{
newOb.weekday == undefined? newOb.weekday = [o]: newOb.weekday.push(o);}});

0 个答案:

没有答案