使用簡單組件的 angular 中的問題路由子項

Question

我對 angular 8 中的路線有疑問，問題是兒童路線不起作用

我的路線是：

const routes: Routes = [
  {
    path: 'admin', component: MainComponent, children: [
      { path: 'uno', component: HomeComponent, outlet: 'sub' },
      { path: '', component: HomeComponent, outlet: 'sub' },
      //{ path: '', component: HomeComponent, outlet: 'sub' },
    ]
  }
];

url localhost:5001/admin 正在瀏覽器中顯示組件“MainComponent”和“HomeComponent”，但 url localhost:5001/admin/uno 沒有，在控制台中我有一個消息“錯誤：無法匹配任何路由。 URL 段：'admin/uno'"

提前致謝

** 更新 **

我在 app.component.html 中有這個

<router-outlet></router-outlet>

而在main.component.html

<div id="content" class="content">
    <div>
      <button routerLink="uno">Tab1</button>
    </div>
    <router-outlet name="sub"></router-outlet>
  </div>

Answer 1

您的問題的兩個解決方案。 首先，如果您想使用命名的網點，您的鏈接必須如下所示：

<button [routerLink]="[{outlets: {sub: ['uno']}}]">Tab1</button>

第二種解決方案（我認為在這種情況下首選）是從<router-outlet>和路徑配置中刪除名稱。 由於您在路由/admin中的 MainComponent 中有一個嵌套的路由器出口，因此所有子路由都將在 MainComponent 的路由器出口中渲染。 可能您必須將pathMatch: 'full'添加到您的子路線。

const routes: Routes = [
  {
    path: "admin",
    component: MainComponent,
    children: [
      { path: "uno", component: HomeComponent, pathMatch: 'full'},
    ]
  }
];

<div id="content" class="content">
  <div>
    <button routerLink="uno">Tab1</button>
  </div>
  <router-outlet></router-outlet>
</div>