我有一个问题,当点击我的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 {

}

希望你能帮帮我!

推荐答案

@Naren的回答应该可以解决您的路由问题.对于我的版本:

  1. Use loadChildren instead of children for the routes in the App.route.ts

App.route.ts

export const routes: Routes = [
  {
    path: 'user',
    loadComponent: () => UserComponent,
    loadChildren: () => import('./view/user/user.routes').then((m) => m.routes),
  },
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
  },
];

User.routes.ts

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => DashboardComponent,
  },
  {
    path: 'teams',
    loadComponent: () => TeamsComponent,
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'dashboard',
  },
];
  1. SideMenuComponent中导入RouterModule.
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css'],
  standalone: true,
  imports: [RouterModule]
})
export class SideMenuComponent { ... }
  1. 还有打字错误,应该是routerL ink,而不是routerl ink.
<li>
  <a href="#" routerLink="/user/dashboard" class="nav-link link-body-emphasis">
    ...
  </a>
</li>
<li>
  <a href="#" routerLink="/user/teams" class="nav-link link-body-emphasis">
    ...
  </a>
</li>

Demo @ StackBlitz

Typescript相关问答推荐

在React中实现具有独立页面的嵌套路径的最佳实践是什么?

无法从应用程序内的库导入组件NX Expo React Native

扩展函数签名中的参数类型,而不使用泛型

如何在Typescript 中输入两个相互关联的变量?

如何在LucideAngular 添加自定义图标以及如何使用它们

如何判断对象是否有重叠的叶子并产生有用的错误消息

如何在Type脚本中动态扩展函数的参数类型?

Select 下拉菜单的占位符不起作用

使用2个派生类作为WeakMap的键

刷新页面时,TypeScrip Redux丢失状态

vue-tsc失败,错误引用项目可能无法禁用vue项目上的emit

正确使用相交类型的打字集

为什么特定的字符串不符合包括该字符串的枚举?

打字脚本中的模块化或命名空间

Rxjs将省略的可观测对象合并到一个数组中

TypeScrip:使用Cypress测试包含插槽的Vue3组件

在类型脚本中创建显式不安全的私有类成员访问函数

显式推断对象为只读

我应该使用服务方法(依赖于可观察的)在组件中进行计算吗?

React 中如何比较两个对象数组并获取不同的值?