Angular 路由没有导航到子路由

Question

我有一个菜单组件，我试图从中导航和加载我的子路由的内容 - AboutComponent，但它不起作用。下面是我的代码，请帮忙：

URL 显示正确的路由，控制台没有错误。但是关于组件没有加载

app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

menu.component.html:

<div class="row menustyle" *ngIf="isMenuClicked">
 <div class="col24" style="padding: 0 20px">
   <ul class="nav navba-nav">
     <li>
        <a *ngFor="let data of navPathData" routerLinkActive="active" 
          routerLink="data.value"
          (click)="goto(data.value)">{{ data.text }}</a>
     </li>
   </ul>
 </div>
</div>

menu.component.ts:

构造函数：

 constructor(private readonly route: ActivatedRoute,
private readonly router: Router, private dataService: DataServiceService) { }

方法： public 转到（值：字符串）：void { //this.router.navigate();

this.router.navigate([value], { relativeTo: this.route });

}

应用-routing.modulets:

import { MenuComponent } from './menu/menu.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './content/about/about.component';

const routes: Routes = [
 { path: '', redirectTo: '/menu', pathMatch: 'full' },
 {
   path: 'menu', component: MenuComponent, children:
    [
     { path: ':id', component: AboutComponent }
    ]
 }
 ];

@NgModule({
imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

当您将路由器链接绑定到一个变量时，您需要用方括号 routerlink 括起来

[routerLink]="data.value"

根据你的路由设置，你也可能指定了错误的相对路由，你可以尝试['./'+data.value]或['/'+data.value]

如果这仍然不起作用，您可以通过启用跟踪获得额外的路由器调试信息

RouterModule.forRoot(
      ...,
      { enableTracing: true }
    )

Answer 2

我的解决方案是

 { path: '', redirectTo: '/menu', pathMatch: 'full' },
 {
   path: 'menu', children:
    [
     { path: '', component: MenuComponent }
     { path: ':id', component: AboutComponent }
    ]
 }
 ];

Angular 路由没有导航到子路由

Angular Routing is not navigating to child route

routing

angular