在 Angular 中加载一个组件作为子组件答案

【问题标题】：Load a component as child component in Angular在 Angular 中加载一个组件作为子组件
【发布时间】：2019-03-09 11:09:35
【问题描述】：

我正在使用 Angular 6 并尝试将组件导入为子组件。

我有一个组件可以通过路由到'/register' 来访问，它加载signUpComponent，我还有其他组件使用'/services' 加载ServicesComponent，而且我在多个组件中同时使用这两个路由。

现在我的问题是我想将ServicesComponent 作为SigUpComponent 的子组件加载，即类似'/register/services'（一种嵌套路由），条件是我的两个路由都是单独定义的。有没有办法做到这一点，而不是将第三条路线重新定义为'/register/services'，并将ServicesComponent 定义为SigUpComponent 的子组件

【问题讨论】：

我不知道您到底在寻找什么，但您尝试过吗？ angular.io/guide/router#child-routing-component
你检查过 Angular 网站吗？它在那里

标签： angular routing

【解决方案1】：

你可以像这样使用子路由::

const parentModuleRoutes: Routes = [
    {
        path: 'parent-component',            //<---- parent component declared here
        component: PetParentComponent,
        children: [                          //<---- child components declared here
            {
                path:'child-one',
                component: ChildOneComponent
            },
            {
                path:'child-two',
                component: ChildTwoComponent
            },
            {
                path:'child-three',
                component: ChildThreeComponent
            },
            {
                path:'child-four',
                component: ChildFourComponent
            },
        ]
    }
];

您可以使用此链接获取更多信息::

https://angular.io/guide/router#child-routing-component（根据@wannadream 所说）

https://itnext.io/child-routes-with-respective-components-in-angular-4-36f1be42278e

【讨论】：