Angular 2/4/5 - 將子組件加載到主路由器插座

Question

我目前正在使用 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>上加載（ PrivacysettingsforapplicationsComponent ）子項而不是它的直接父項<router-outlet>即。 ApplicationComponent的。 我檢查過的一種方法是將子組件作為父組件的對等組件，但是我的面包屑模塊​​無法識別誰是該組件PrivacysettingsforapplicationsComponent的真正父PrivacysettingsforapplicationsComponent 。

Answer 1

path: "applications/:applicationId/privacysettingsforapplications"

將其替換為以下路徑

path: ":applicationId/privacysettingsforapplications"

Answer 2

您需要提供完整路徑，而不僅僅是路由器路徑。 例如，為應用程序/服務提供路徑線應用程序/隱私設置。

您需要提供正確的路徑，因為上面只是一個例子。

有了這個，服務模板將加載到父大多數路由器插座上。

希望這有幫助。