我有一个登录组件,它是初始页面。登录成功后,它将路由到 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'
我做错了什么?我该如何让它发挥作用?
您的数据列表路径中存在拼写错误。应该是“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 {}