2017-08-01 8 views
0

質問1: コンポーネントのoninit関数は、router.data.subscribeを使用してデータと親データを取得します。angular2ルーターのデータは子に渡されますが、lazyloadの子は渡されません

なぜ親データを取得できますか?

ルーターのドキュメントに情報がありません。 angular2 router

質問2: なぜルートの親データを取得できないのですか? {PAGETITLE: 'youare'、テスト:123213213}、

IはCrisisListComponentでデータを得ることができないAPP-router.module.tsでIは
データを定義しました。

アプリ-router.module.ts

const routes: Routes = [ 
    {path: '', redirectTo: 'login', pathMatch: 'full'}, 
    {path: 'login', component: LoginPage}, 
    { 
    path: ':id', 
    component: MainLayoutComponent, 
    data: {pageTitle: 'youare', test:123213213}, 
    children: [ 
     { 
     path: 'personalcenter', 
     loadChildren: 'app/personalcenter/personal-center.module#PersonalCenterModule', 
     data: {pageTitle: 'personalcenter'} 
     }, 
     { 
     path: 'crisis-center', 
     loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule', 
     data: { preload: true } 
     }, 
] 

危機-センター-routing.module.ts

const crisisCenterRoutes: Routes = [ 
    { 
    path: '', 
    component: CrisisCenterComponent, 
    data:{you:"are"}, 
    children: [ 
     { 
     path: '', 
     component: CrisisListComponent, 
     children: [ 
      { 
      path: ':id', 
      component: CrisisDetailComponent, 
      canDeactivate: [CanDeactivateGuard], 
      resolve: { 
       crisis: CrisisDetailResolver 
      } 
      }, 
      { 
      path: '', 
      component: CrisisCenterHomeComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

危機list.component.ts



    export class CrisisListComponent implements OnInit { 
     constructor(
     private service: CrisisService, 
     private route: ActivatedRoute, 
     private router: Router 
    ) {} 


     ngOnInit() { 
     this.route.data.subscribe(data=>{ 
      console.log("asdfsadfsadf"+JSON.stringify(data)); 
     }); 
     } 

    } 

でCrisisListComponent、印刷ログ: "asdfsadfsadf {" preload ":true、" you ":" are "}"

答えて

0

質問は、1ヶ月前に尋ねた、と私はしたいと誰もがそれに答えるないようだ、と私はこの答えは、この問題が発生した人々を助けることを願っていました。 私は英語のネイティブスピーカーではありません。

これは意図したとおりに動作します。
これは、パラメーターとデータを継承する規則です。
1.解決されたデータはparamsから派生しています。したがって、ルールは同じ方法でパラメータとデータに適用されます。
2.空パスのルートは、親のパラメータとデータを継承します。これは、独自のパラメータ(空のパスルート)を持つことができず、その結果、親のパラメータとデータをそれ自身のものとして使用することが多いためです。
3.ルートがコンポーネントレスルートである場合、ルートはその親のパラメータとデータを継承します。これは、親のアクティブルートを注入できるコンポーネントがないためです。 他のものは継承されません。

データを取得したいがコンポーネントレスの親を継承しない場合は、元のルート設定を取得するActivatedRouteSnapshot.routeConfigを使用できます。

export class CrisisListComponent implements OnInit { 
    constructor(
    private service: CrisisService, 
    private route: ActivatedRoute, 
    private router: Router 
) {} 
    ngOnInit() { 
    console.log(this.route.snapshot.routeConfig.data) // {you:"are"} 
    } 
} 

そして、あなたはCrisisListComponentにルートからデータを取得したい場合は、単に

export class CrisisListComponent implements OnInit { 
    constructor(
    private service: CrisisService, 
    private route: ActivatedRoute, 
    private router: Router 
) {} 


    ngOnInit() { 
    console.log(this.route.root.snapshot.data) // {pageTitle: 'youare', test:123213213} 
    } 
} 

私は、これはあなたを助けることを願っています。

+0

優れたexplantion!ありがとうございました。 – bignewyork

0

問題を説明する人がいます。 Angular2/4ルータは、ルータのパスが空の場合、親ルータのデータが子に渡されるように設計されています。

誰かが問題を混乱させると、以下のような詳細が表示されます。

Router data and param should be available to children components

+0

1.解決されたデータはparamsに由来します。したがって、ルールは同じ方法でパラメータとデータに適用されます。
2.空パスのルートは、親のパラメータとデータを継承します。これは、独自のパラメータ(空のパスルート)を持つことができず、その結果、親のパラメータとデータをそれ自身のものとして使用することが多いためです。 3.ルートがコンポーネントレスルートである場合、ルートはその親のパラメータとデータを継承します。これは、親のアクティブルートを注入できるコンポーネントがないためです。 – bignewyork

関連する問題