angularjs - 親の親のルーターアウトレットに子ルートをレンダリングする方法

Question

AngularJS 1.x ui-router には、ビューポートという非常に柔軟な概念があります。私には名前付きルートのように思えますが、はるかに柔軟です。

のルートは、ルートのviewportsようなものに分割されていませんprimary/aux。それらは ui-view を使用して html のどこにでも配置され、状態/ルートからビューポート名で参照できます。

現在、viktor savkin による新しい angular 2 ルーター 3 では<router-outlet>、コンポーネントに直接配置されているため、その柔軟性を見つけることができず、バインドされているように見えます。

多分私のアプローチはあまりにもui-routerのようです...

ng2 の angular ui-router は知っていますが、使用したくありません。

私はいくつかのスケッチを作成しました (残念ながら URL にタイプミスがありますが、元のスケッチを失ってしまいました...)。

state/url /projects/1 (angular router 3 alpha を使用したコンポーネントのないルート) にいると、プロジェクトの [開く] ボタンをクリックすると、このプロジェクトの子ミーティングがレンダリングされます

次のように、あるエラーから別のエラーにジャンプしています。

- can not read data annotations of undefined
- can not find primary outled
- can not find any matching route...

これは、この一般的なシナリオをセットアップするのにかなり面倒です。

私が試したことの1つ：

  { path: 'projects', component: ProjectsRootComponent, children: [
      { path: '', component: ProjectsListComponent },
      { path: 'create', component: ProjectsCreateComponent },
      { path: ':id', children:[ // componentless route
           { path: 'meetings',  component: MeetingsListComponent},
      ]}
    ]
  },

一目で簡単でより明白な概念を提供する ui-router を試してみてください。