0

angular 2 ヒーローのサンプルを見ると、次のようになります。

http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

CrisisCenterとHeroesのリンクがあります

どちらももののリストをレンダリングするか、ID で編集できます。

しかし、RoutesConfig は、

redirectTo: '/crisis-center',

CrisisCenter にはルートの子プロパティがあります。

children: [
      {
        path: 'admin',
        component: CrisisAdminComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'edit/:id',
        component: CrisisDetailComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: '',
        component: CrisisListComponent
      }
    ]

angular 2 サイトで検索すると: https://angular.io/docs/ts/latest/glossary.html#!#stq=router&stp=1

「子供」の場合、その子供のプロパティの目的に関する情報は得られません。

ヒーローの RoutesConfig を見ると:

export const HeroesRoutes: RouterConfig = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

子プロパティはありません。ルート ページにもヒーローをロードできます: http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

では、その子供の財産は何の役に立つのでしょうか?

4

1 に答える 1

1

子コンポーネントは、最初に親コンポーネント (ここでは CrisisCenterComponent ルーター アウトレット) に表示され、次に次のルーター アウトレット (この例では AppComponent) に表示されます。また、子コンポーネントのパスは、「/」を挟んで親パスに追加 (拡張) されます。

これに関する angular2 の説明は、https ://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component にあります。

親の /crisis-center ルートには、2 つのルートの配列を持つchildren プロパティがあることに注意してください。これらの 2 つのルートは、CrisisListComponent と CrisisDetailComponentの 2 つの危機管理センターの子コンポーネントに移動します。

これらのルートの処理には、いくつかの重要な違いがあります。

まず、ルーターはこれらの子ルートのコンポーネントを、AppComponent シェルの RouterOutlet ではなく、CrisisCenterComponent の RouterOutlet に表示します。

次に、子パスは親ルートのパスを拡張します。

通常、/ で始まるパスは、アプリケーションのルートを参照します。ここでは、CrisisCenterComponent へのパスに追加されます。

CrisisListComponent に移動する URL を作成するには、その子ルート パス / を /crisis-center に追加します。

CrisisDetailComponent に移動する URL を記述するには、子ルート パス / を追加し、その後に危機 ID を追加して、次のようにします。

これを使用する方法を次に示します (主な利点は、すべてのビジネス フィーチャ/オブジェクト ルートが 1 か所にあり、共通のテンプレート (ダッシュボード) が異なるフィーチャ/オブジェクト ビジネス アクション間で共有されることです)。

import { RouterConfig }          from '@angular/router';

import { Object1Dashboard } from './object1.dashboard';
import { Object1List } from './object1.list';
import { Object1New } from './object1.new';
import { Object1Edit } from './object1.edit';

export const Object1Routes: RouterConfig = [
    {
        path: 'object1',
        component: Object1Dashboard,
        'children': [
            { path: '', component: Object1List },
            { path: 'new', component: Object1New },
            { path: 'edit/:id', component: Object1Edit }
        ]
    }
];

（ダッシュボード）のhtmlは次のようになります。

<h2> Dashboard</h2>
<div>
   <p>
      <a [routerLink]="['/object1']">View</a>
      <a [routerLink]="['/object1/new']">New</a>
   </p>
   <p><router-outlet></router-outlet></p>
</div>

このアプローチを使用すると、さまざまな機能オプション (リスト、新規、編集など) 間で共通のメニューを共有できます。

于 2016-06-25T23:02:50.770 に答える