Question

我有一个菜单组件，试图从该菜单组件导航并加载子路线的内容-AboutComponent，该组件不起作用。以下是我的代码，请提供帮助：

URL显示正确的路由，控制台中没有错误。但是about组件不会加载

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 goto（value：string）：void { //this.router.navigate（）;

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

}

app-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

我的解决方案是

__bases__

Answer 2

在将routerlink绑定到变量时，需要用方括号将routerlink包裹起来

[routerLink]="data.value"

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

如果仍然无法正常工作，则可以通过启用跟踪来获取其他路由器调试信息

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

角路由未导航到子路由

2 个答案: