与子组件一起路由

与原始文档相反，我发现这是在 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 的伟大示例和描述