角度 4 子路由

Posted 2023-02-26

【中文标题】角度 4 子路由

【英文标题】：angular 4 child routing

【发布时间】：2017-07-27 19:47:55

【问题描述】：

我正在尝试为孩子编写路由。我遇到的问题是路径没有正确插入浏览器的 url 栏中。代码下方。

路由器模块

const routes: Routes = [

  path: 'menu', component: MenuComponent, canActivate: [AuthGuard],
    children: [
       path: 'upload', component: DrawingUploadComponent ,
       path: 'account', component: AccountComponent ,
       path: 'projects', component: ProjectListComponent 
    ]
];

@NgModule(
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
)

export class MenuRoutingModule 

菜单组件

<nav>
  <a routerLink="/projects" routerLinkActive="active">Projects</a>
  <a routerLink="/upload" routerLinkActive="active">Upload</a>
  <a routerLink="/account" routerLinkActive="active">Account</a>
</nav>
MENU COMPONENT
<router-outlet></router-outlet>

父组件：

const routes: Routes = [
  path: 'login', component: LoginComponent,
  path: 'register', component: RegistrationComponent,
  path: "", redirectTo: "login", pathMatch: "full",
  path: 'menu', component: MenuComponent, canActivate: [AuthGuard]
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)

export class AppRoutingModule 

所以问题是当我在"/menu" 下显示菜单组件时，现在当我点击任何链接时，例如

<a routerLink="/upload" routerLinkActive="active">Upload</a>

我收到控制台错误 无法匹配任何路由。 URL 段：“上传” 错误：无法匹配任何路由。 URL 段：“上传”

但是当我在浏览器栏“/menu/upload”中手动输入路线时，我得到了正确的结果

【参考方案1】：

当您的路由以 / 开头时，它指的是您应用的根目录。您需要删除它，或者使用完整路径，例如routerLink="/menu/upload".