显示嵌套路线中的零部件数据-Angular

Question

我具有以下组成部分：

TodosComponent（路径：'./todos/'）：具有html内容<p>TODO WORKS</p>

AddTodosComponent（路径：'./ todos / add'）：具有html内容<p>ADD TODO WORKS</p>

DeleteTodosComponent（路径：“ ./ todos / delete”）：具有html内容<p>DELETE TODO WORKS</p>

添加和删除是Todos中的嵌套路由。

在我的主要AppComponent中，我有一个sidenav，其中包含3个组件（TodosComponent，AddTodosComponent，DeleteTodosComponent）的链接。

每当从sidenav中单击一个组件时，我都试图在AppComponent的内容区域中显示这三个组件的内容。 当我单击子路由时，我收到此错误：无法匹配任何路由。网址段：“待办事项/添加”

当在sidenav中单击链接时，如何在AppComponent的sidenav内容中显示组件的html？

app-routing.module.ts

const appRoutes: Routes = [
  { path: '', redirectTo: '/todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent, pathMatch: 'full', children: [
    { path: 'add', component: AddTodoComponent},
    { path: 'delete', component: DeleteTodoComponent},
  ]},
]

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

app.component.html

<mat-sidenav-container>
  <mat-sidenav opened="true" mode="side" fixedInViewport="true">
    <p>I am the sidenav</p>
    <mat-nav-list>
      <mat-list-item>
        <a matLine routerLink="/todos">List Todos</a>
      </mat-list-item>
      <mat-list-item>
        <a matLine routerLink="/todos/add">Add Todo</a>
      </mat-list-item>
      <mat-list-item>
        <a matLine routerLink="/todos/delete">Delete Todo</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
    <p>Main Content</p>
  </mat-sidenav-content>
</mat-sidenav-container>

我想要实现的目标：

Answer 1

摘录自angular documentation

  

从技术上讲，pathMatch ='full'会在   网址中其余的不匹配段与“”匹配。

在您的示例中，在路径todos上，剩余的不匹配部分是/todos/add，这不是完全匹配的内容，路由器不会看其中的子节点并跳到下一路径（您没有任何路径），但在找不到该路径时，您将得到错误消息：）

从pathMatch: 'full'路径中删除/todos，它应该可以工作：

const appRoutes: Routes = [
  { path: '', redirectTo: '/todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent,  children: [
    { path: 'add', component: AddTodoComponent},
    { path: 'delete', component: DeleteTodoComponent},
  ]},
]

Answer 2

为什么我们需要孩子，因为我们将所有孩子都显示在同一路由器出口中。

const appRoutes: Routes = [
  { path: '', redirectTo: '/todos', pathMatch: 'full' },
  { path: '/todos', component: TodosComponent }, 
  { path: '/todos/add', component: AddTodoComponent },
  { path: '/todos/delete', component: DeleteTodoComponent }
]