Angular 18 - 路由到嵌套组件

Question

我有一个登录组件，它是初始页面。登录成功后，它将路由到 Home 组件，该组件将包含 3 个组件：具有导航栏的 TopBar 组件和 2 个保存数据和数据列表的组件。我的预期结果是当用户单击导航栏上的“saveData”路线时，它应该显示 SaveData 组件；当用户单击“dataList”路线时，它应该显示数据列表页面。

route.ts：

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { SavedataComponent } from './savedata/savedata.component';
import { DatalistComponent } from './datalist/datalist.component';

const routeConfig: Routes = [
  { path: '', component: LoginComponent },   
  { path: 'home', component: HomeComponent,
    children: [
      { path: 'savedata', component: SavedataComponent },
      { path: 'satalist', component: DatalistComponent },
    ]
  }
];
export default routeConfig;

当用户单击登录组件上的按钮时，它会被路由到主页组件。

home.component.html:

<app-topbar></app-topbar>
<section class="presentation">
  <app-savedata></app-savedata>
</section>

和topbar.html:

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" [routerLink]='["savedata"]'  routerLinkActive="active_route">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]='["datalist"]'  routerLinkActive="active_route" >List</a>
  </li>
</ul>

当我单击导航栏上的“列表”时，它不会进入“列表”页面。我可以在控制台看到：

core.mjs:7191 错误 RuntimeError: NG04002: 无法匹配任何路由。 URL 段：'home/datalist'

我做错了什么？我该如何让它发挥作用？

Answer 1

您的数据列表路径中存在拼写错误。应该是“datalist”而不是“satalist”。

此外，在

HomeComponent

视图中，默认情况下会渲染

DataListComponent

。并且当您单击数据列表链接时，它不会显示

DataListCompnent

。

您需要

<router-outlet>

元素来根据所选路线显示组件。

import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <app-topbar></app-topbar>
    <section class="presentation">
        <router-outlet></router-outlet>
    </section>
  `,
  imports: [TopBarComponent, RouterOutlet],
})
export class HomeComponent {}

演示@StackBlitz