Question

我试图使用从子组件（菜单栏）动态发出的URL从父组件（Core）导航。问题是无需任何理由就取消了导航。

为了确定问题是否来自父组件，我在父组件中实现了一个导航到静态URL的按钮，它工作正常！

核心模板：

<app-menubar (onNavigation)="onMenubarNavigation($event)"></app-menubar>
<button type="button" (click)="navigate()">Navigate</button>
<router-outlet><router-outlet>

核心组件：

onMenubarNavigation(urlSegments: string[]): void {
    this.router.navigate(urlSegments);
  }

navigate(): void {
    let segments: string[];

    segments = ['index', 'messages'];
    this.router.navigate(segments);
  }

菜单栏模板：

<a (click)="changeRoute(element.module.route)">
// element.module route is the string: "/messages"

菜单栏组件：

@Output() onNavigation = new EventEmitter<string[]>(); 

changeRoute(url: string): void {
    let urlSegments: string[];

    urlSegments = url.split('/');
    urlSegments[0] = 'index';
    this.onNavigation.emit(urlSegments);
  }

应用路由模块：

  const routes: Routes = [
  { path: 'login', loadChildren: '.\/auth\/auth.module#AuthModule' },
  { path: 'logout', loadChildren: '.\/auth\/auth.module#AuthModule' },
  { path: '', loadChildren: './theme/core/app.core.module#AppCoreModule', pathMatch: 'full' },
];

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

核心路由模块：

    const coreRoutes: Routes = [
  {
    path: '',
    component: AppCoreComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'home',
        loadChildren: '..\/home\/app.home.module#AppHomeModule'
      },
      {
        path: 'index',
        loadChildren: '..\/index\/app.index.module#AppIndexModule'
      },
      {
        path: '',
        redirectTo: 'index',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(coreRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppCoreRoutingModule {}

角度路由调试显示两个网址在导航期间使用子组件或静态组件发出的网址是相同的，但是当我使用发出的组件导航时，导航将被取消，我不知道为什么。 ..

有人曾经使用角度路由器遇到过这种麻烦吗？

Angular 5：无法导航到动态网址

0 个答案: