與子元件一起路由

與原始文件相反，我發現這是在 app.routing.ts 或 app.module.ts 檔案中正確巢狀子路徑的方法（取決於你的偏好）。使用 WebPack 或 SystemJS 時，此方法有效。

以下示例顯示了家庭，家庭/計數器和家庭/計數器/獲取資料的路由。第一個和最後一個路由是重定向的示例。最後，在示例的最後是一種將要匯入的 Route 匯出到單獨檔案中的正確方法。對於前者 app.module.ts

為了進一步說明，Angular 要求你在 children 陣列中包含一個包含父元件的無路徑路徑，以表示父路由。這有點令人困惑，但如果你考慮子路由的空白 URL，它將基本上等於父路由的相同 URL。

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

通過 Siraj 的偉大示例和描述