3

で「ターミナル」ルートchildren、つまり「オプション」でルートを構成することは可能ですかchildren。

詳細が最初に表示されず、詳細ビューを開いたときにリストが破棄されないルーティング可能なマスター/詳細ビューを作成しようとしています。

たとえば、 に移動してから/a、 を破棄せずaに に移動し/a/1ます。

最初の試み:

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

... この構成では、次のエラーがスローされます。

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'a'

2 回目の試行:

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent },
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

... リスト コンポーネントは破棄され、再作成されます。つまり、ユーザー入力がある場合、値は失われます。

3 回目の試行- 「空の」コンポーネントを作成し、デフォルトでロードします。

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: '', component: EmptyComponent },
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...動作しますが、回避策のように感じます。

より良い方法はありますか？

4

2 に答える 2

3

3回目の試みのさらに単純なバージョンは、コンポーネントでさえも、他に何もない空のパスを使用することです:

const routes: Routes = [
  { path: 'a', component: AListComponent, children: [
    { path: '' },
    { path: ':id', component: ADetailsComponent }
  ]},
];

Victor Savkin は、コンポーネントのないルートについて書いていますが、このような完全に空のルートを使用するまでには至っていません (彼の例には aredirectまたはchildrenプロパティが含まれています)。

設定によっては、さらに一歩進んで/aパスを削除することもできます。機能モジュールに次のような宣言があり、次のroutesように遅延ロードされpath: 'module-path'ます。

const routes: Routes = [
  { path: '', component: AListComponent, children: [
    { path: '' },
    { path: ':id', component: ADetailsComponent }
  ]},
];

したがって/module-path、空の を含む AListComponent をロードするための<router-outlet>ルーティングと/module-path/5、アウトレットに ADetailsComponent を設定するためのルーティングです。

于 2016-08-26T04:25:01.000 に答える
1

私の意見では、3回目の試行で示されているような何も表示されない空のダミーコンポーネントが最善の方法です。

于 2016-08-01T08:43:16.387 に答える