6

次の設定があるとしましょう：

employee -------+ employee.module.ts
                | employee.routing.ts
                + employee.component.ts
                |
sales ----------+ sales.module.ts
                | sales.routing.ts
                + sales.component.ts
app.module.ts
app.routing.ts
app.component.ts

ルートを次のようにしたい

employee/14/sales

そこで、次のルーティング宣言を定義します。

app.routing.ts

...
import { AppComponent } from './app.component';

const appRoutes: Routes = [
    { path: '', component: AppComponent }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

employee.routing.ts

...
import { EmployeeComponent } from './employee.component';

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

export const employeeRouting = RouterModule.forChild(employeeRoutes);

sales.routing.ts

...
import { SalesComponent } from './sales.component';

export const salesRoutes: Routes = [
    { path: 'sales', component: SalesComponent }  
];

export const salesRouting = RouterModule.forChild(salesRoutes);

私のモジュールは次の形式を取ります：

app.module.ts

import { EmployeeModule } from './employee/employee.module';
import { AppComponent } from './app.component';

import {
    routing,
    appRoutingProviders
} from './app.routing';

@NgModule({
    imports: [
        ...
        EmployeeModule,
        routing
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ],
    providers: [
        appRoutingProviders
    ]
})

employee.module.ts

import { SalesModule } from '../sales/sales.module';
import { EmployeeComponent } from './employee.component';
import { employeeRouting } from './employee.routing';

@NgModule({
    imports: [
        SalesModule,
        employeeRouting
    ],
    declarations: [
        EmployeeComponent
    ]
})

sales.module.ts

import { SalesComponent } from './sales.component';
import { salesRouting } from './sales.routing';

@NgModule({
    imports: [
        salesRouting
    ],
    declarations: [
        SalesComponent
    ]
})
export class SalesModule {}

に移動できるようになりました

employee/14

しかし、私がナビゲートしようとすると

employee/14/sales

でお出迎えです

エラー: どのルートとも一致しません: 'employee/14/sales'

入ることはできますが、

sales

それは機能するはずがありませんが機能するため、何らかの方法ですべてのルートが相互/に構築されるのではなく、直接接続されます。

私は何が欠けていますか？

問題を示すEDIT plkr は、ここにあります。

4

1 に答える 1

4

私は最終的にこれを機能させました。重要なアイデアは、employeeRoutesfromをインクルードしないことです (それは fromをs 宣言employee.routing.tsに追加し、さらに別のエラー メッセージが表示されるため)、代わりに別の内部を作成し、` で始まるルートに移動するときに遅延ロードしますEmployeeModuleAppModuleemployeeRoutesapp.routing.tsEmployeeModule

/employee

関連するコードは次のとおりです。

import {
    RouterModule,
    Routes
} from '@angular/router';

import { AppComponent } from './app.component';

const employeeRoutes: Routes = [
  {
    path: 'employee',
    loadChildren: 'app/employee/employee.module#EmployeeModule'
  }
];

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    ...employeeRoutes
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

完全なplnkrはここにあります。

于 2016-08-18T06:46:09.237 に答える