Angular 2/4/5 - 将子组件加载到主路由器出口答案

【问题标题】：Angular 2/4/5 - Load child component to main router-outletAngular 2/4/5 - 将子组件加载到主路由器出口
【发布时间】：2017-12-26 09:21:27
【问题描述】：

我目前正在使用 Angular 5。我在路由器配置及其组件内容的呈现方面遇到了问题。如下是我的路由器配置。

  const appRoutes: Routes = [
    { path: "", pathMatch: "full", redirectTo: "home" },
    {
      path: "home", component: HomeComponent
    },
    {
      path: "applications", component: ApplicationsComponent,
      children: [{
        path: ":applicationId/privacysettingsforapplications", component: PrivacysettingsforapplicationsComponent,
        children: [
          { path: "", pathMatch: "full", redirectTo: "services" },
          {
            path: "services", component: PrivacysettingsforapplicationservicesComponent
          },
          {
            path: "data", component: PrivacysettingsforapplicationdataComponent
          }]
      }]
    },
    {
      path: "devices", component: DevicesComponent,
    },
  ];

我们有一个主要的<router-outlet></router-outlet>，其中 angular 加载其父组件的所有内容。这里ApplicationsComponent 有一个孩子PrivacysettingsforapplicationsComponent 又有两个孩子（PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent 即：服务和数据）。

我想检查是否有任何方法可以在主 <router-outlet> 而不是其直接父 <router-outlet> 上加载（PrivacysettingsforapplicationsComponent）子级，即。 ApplicationComponent 的。我检查过的一种方法是将子组件作为父组件的对等，但是我的面包屑模块无法识别谁是该组件的真正父组件PrivacysettingsforapplicationsComponent。

【问题讨论】：

标签： javascript angular angular2-routing angular4-router

【解决方案1】：

path: "applications/:applicationId/privacysettingsforapplications"

将其替换为以下路径

path: ":applicationId/privacysettingsforapplications"

【讨论】：

嗨 Sachin，您建议的路径是正确的，但它需要 ApplicationComponent 中的但我想将它加载到大多数父组件中，即 AppComponent

【解决方案2】：

您需要提供完整路径，而不仅仅是路由器路径。例如为应用程序/服务提供路径行应用程序/隐私设置。

您需要提供正确的路径，以上只是一个示例。

这样，服务模板将加载到父级路由器出口。

希望对您有所帮助。

【讨论】：