我有一个问题,当点击我的routerlink
时,我总是返回到app.routes.ts的‘’路径.
而路由链接分别是‘用户/团队’和‘用户/仪表板’
当我转到"/User/Dashboard"或"/User/Teams"时,可以访问这些页面.只有当使用routerlink
时,它才不会 bootstrap 我找到正确的组件.
这是我的路由设置.
这是我的app.routes.ts分:
import { Routes } from '@angular/router';
import { HomeComponent } from './view/home/home.component';
import { UserComponent } from './shared/layouts/user/user.component';
export const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path:'user',
loadComponent: () => UserComponent,
children: [
{
path:'',
loadChildren: () => import('./view/user/user.routes').then((m) => m.routes)
}
]
}
];
我有第二个路径文件user.routes.ts:
import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TeamsComponent } from './teams/teams.component';
export const routes: Routes = [
{
path: 'dashboard',
loadComponent: () => DashboardComponent,
},
{
path:'teams',
loadComponent: () => TeamsComponent
}
,
{
path: '',
pathMatch: 'full',
redirectTo: 'dashbaord',
}
];
这是我的user.component.html,其中包含<router-outlet>
.
<main class="d-flex flex-nowrap">
<app-side-menu></app-side-menu>
<div class="container-fluid p-5">
<router-outlet></router-outlet>
</div>
</main>
我的侧边菜单包含如下路由链接. 前side-menu.component.html名:
<li>
<a href="#" routerlink="/user/dashboard" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" routerlink="/user/teams" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
My Teams
</a>
</li>
这是前side-menu.component.ts名:
import { Component } from '@angular/core';
@Component({
selector: 'app-side-menu',
standalone: true,
imports: [],
templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss'
})
export class SideMenuComponent {
}
希望你能帮帮我!