Angular多路由器模块不工作

时间：2018-01-22 16:43:17

标签： angular angular-routing

我想在我的主应用程序中添加路由模块，并在单独的模块中使用路由，例如：

app
 - modules
   -my-module
      my-routing.module.ts
 app-routing.module.ts

主路由模块具有：

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'view-container' },
  { path: 'view-container', component: ViewContainerComponent },
  { path:  '**', component: ViewContainerComponent }
];

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

子模块的路由是：

const routes: Routes = [
  { path: 'view-detail', component: CompADetailComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: []
})
export class MyRoutingModule { }

我的ViewContainer组件有一个routerLink到“view-detail”。

<a [routerLink]="['/view-detail']">
  View Details
</a>

但是，当我点击“查看详细信息”链接时，只有URL更改，才会加载CompADetailComponent。

我注意到如果我将“view-detail”路径移动到主应用程序路由模块，它可以正常工作。在跟踪中，我看到的区别是：

什么时候有效：

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 2, url: '/view-detail')
platform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
platform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
platform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'view-detail')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
platform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
platform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'view-detail')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail')
platform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}

当它不起作用时：

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 2, url: '/view-detail')
platform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
platform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
platform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: '**')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
platform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
platform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: '**')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail')
platform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}

所以它似乎正在拾取“**”路径而不是“视图细节”路径。我有什么问题吗？

*编辑* App模块添加：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CompAModule } from './modules/comp-a/comp-a.module';
import { ViewContainerComponent } from './view-container/view-container.component';
import { CompADetailComponent } from './modules/comp-a-detail/comp-a-detail.component';
import { MyRoutingModule } from './modules/my-module/my-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    ViewContainerComponent,
    CompADetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MyRoutingModule,
    CompAModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 个答案:

答案 0 :(得分：1)

这里的进口数组：

  imports: [
    BrowserModule,
    AppRoutingModule,
    MyRoutingModule,
    CompAModule
  ],

定义路线的顺序。因此，在这里，Angular将按以下顺序合并您的路线。

  { path: '', pathMatch: 'full', redirectTo: 'view-container' },
  { path: 'view-container', component: ViewContainerComponent },
  { path:  '**', component: ViewContainerComponent }
  { path: 'view-detail', component: CompADetailComponent }

由于Angular处理路线＆＃34;首先匹配胜利＆＃34; ...它总会找到你的＆＃39; **＆＃39; 之前路由您的＆＃39; view-detail＆＃39;路由。

您只需要在进口数组中交换订单：

  imports: [
    BrowserModule,
    MyRoutingModule,
    CompAModule,
    AppRoutingModule
  ],

我有一篇博文，详细介绍了路线排序规则的详细信息（和例外情况）：https://blogs.msmvps.com/deborahk/angular-route-ordering/

相关问题
最新问题