web-dev-qa-db-ja.com

Angular解決データを子ルートに渡す

次のコンポーネント構造があります

  • 事業
    • プロジェクトの編集
    • サブリソース1
    • サブリソース2
    • サブリソース3

だから私のルーティングは次のようになります：

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent},
      { path: 'subres1', component: Subres1Component},
      { path: 'subres2', component: Subres2Component},
      { path: 'subres3', component: Subres3Component},
      { path: 'subres4', component: Subres4Component}
    ]
  }
]

{
    path: 'project/:projectId', 
    component: ProjectDetailComponent,
    children: childroutes,
    resolve: { project: ProjectResolver} /** resolve Project from ProjectService **/
}

ご覧のとおり、サービスからProjectdataを解決し、ProjectDetailComponentでそれらにアクセスできます

this.route.snapshot.data

だから今問題は、「EditProjectComponent」で解決されたデータをそのすべての子ルートコンポーネントに渡すにはどうすればよいですか？

子コンポーネントのプロジェクトデータを解決するために次のことができるようになりました。

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent,resolve: { project: ProjectResolver}},
      { path: 'subres1', component: Subres1Component,resolve: { project: ProjectResolver}},
      { path: 'subres2', component: Subres2Component,resolve: { project: ProjectResolver}},
      { path: 'subres3', component: Subres3Component,resolve: { project: ProjectResolver}},
      { path: 'subres4', component: Subres4Component,resolve: { project: ProjectResolver}}
    ]
  }
]

しかし、これは醜く間違っているようです。

angularangular5
16
enno.void

ここには2つのオプションがあります。

1。子固有のリゾルバを作成し、ルートの親プロパティにアクセスすることにより、子のリゾルバを介して親のリゾルブデータにアクセスできます。

[... module.ts | ... component.ts]

{
    path: 'project/:projectId', 
    component: ProjectDetailComponent,
    resolve: { project: ProjectResolver }
    children: [
        { 
            path: ':projectId/edit',
            component: EditProjectComponent,
            resolve: { edit: EditProjectResolve }
        }
    ]
}

edit-project-component.ts

ngOnInit() {
    this.edit = this.route.snapshot.data.edit;
}

2。子のリゾルバをすべてバイパスして、子コンポーネント内から親データにアクセスできます。

[... module.ts | ... component.ts]

{
    path: 'project/:projectId', 
    component: ProjectDetailComponent,
    resolve: { project: ProjectResolver }
    children: [
        { 
            path: ':projectId/edit',
            component: EditProjectComponent
        }
    ]
}

edit-project-component.ts

ngOnInit() {
    this.route.parent.data
        .subscribe((data) => {
            this.edit = data.edit;
        });
}
29
Desmond