2

Cookie が大好きなので、Angular 2 ルーターの最新の化身 (最終リリースのもの) を構成する方法を理解することはできません。かなり大きな Angular 2 RC5 アプリを稼働させていますが、先に進む前に今すぐ最終リリースに移行する必要があります。

このアプリには、Google のドキュメントによると、モジュール内の機能として編成する必要がある、ネストされたコンポーネントが多数あります。私のアプリの典型的なURLは次のようになります

user/34/section/95/client/13/<feature>

しかし、他にもいくつかあります。

user/34/settings

したがって、この場合settingsは機能モジュールになります。

私はドキュメントを読みましたが、かなり長文で急いで本題に入るつもりはありませんでしたが、このケースがまったくカバーされていないことがわかりました。このシナリオが機能しないとは信じられません。大きな見落としのように思われるので、問題は、このルーターが実際にどのように機能するかを完全に把握していないことだと思います。 mだけではありません。

私は自分の要点を説明するためにこのプランカーを作成しました。

このプランカーでは、2 レベルの入れ子を取得しました

app -> benutzer (user) -> klient (client)

問題が発生するのに十分です。期待される結果は、私がナビゲートできることです

benutzer/78/klient/56

つまり、ルーターは実際にそのルートを見つけますが、現時点では見つけられません。

コードを plunker に移動して追加する前にdashboard.component(plunker では URL を簡単に変更できないため、に頼る必要があるためrouterLink)、実際にナビゲートすることができました

klient/56

これは不可能です。別のモジュールで定義された各ルートは、お互いの上に構築するのではなく、ルートに追加されているようです。

これに関するヘルプは大歓迎です。

4

2 に答える 2

1

https://stackoverflow.com/a/39629949/370935から私の回答をコピーして、可能な解決策を見つけました

これも機能するようになりました。階層内のすべての親コンポーネントを実際にレンダリングする必要がない限り、私のソリューションははるかにエレガントだと思います。

私のアプローチを理解するための鍵は、モジュール内でどれほど深くネストされていても、すべてのルートがルート モジュールに追加されるということです。簡単な例として、この URL を使用してナビゲートしたいと があるDepartmentModuleとします。EmployeeModule

/department/1/employee/2

その時点で、従業員 2 の詳細が表示されます。departmentindepartment.routing.tsおよびemployeeinのルートの構成は、意図したとおりに機能employee.routing.tsせず、次の場所に移動できることに気付くでしょう。

/employee/2

ルートコンポーネントから、

/department/1/employee/2

クラッシュします (ルートが見つかりません)。このシナリオでの一般的なルート構成は次のようになります。

export const departmentRoutes: Routes = [
    { path: 'department', component: DepartmentComponent, children: [
        { path: '', component: DepartmentsComponent },
        { path: ':id', component: DepartmentDetailsComponent }
    ]}
];

export const employeeRoutes: Routes = [
    { path: 'employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

によってEmployeeModuleインポートされDepartmentModuleます。さて、私が言ったように、残念ながらそれはうまくいきません。

ただし、1 回の変更で次のようになります。

export const employeeRoutes: Routes = [
    { path: 'department/:id/employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

キャッチは、URL にDepartmentModule移動するとすぐに積極的な役割を果たさなくなったことですが、 .employeeActivatedRoute

export class EmployeeDetailsComponent {
    departmentId: number;
    employeeId: number;
    constructor(route: ActivatedRoute) {
        route.parent.params.subscribe(params =>
            this.departmentId= +params['id'])
        route.params.subscribe(params => 
            this.employeeId= +params['id']);
    }
}

これが公式のアプローチになるのではないかと思いますが、今のところ、これは Angular 2 チームからの次の破壊的変更まで機能します。

于 2016-09-22T04:00:00.697 に答える