Question

我能够重现这种情况，但首先让我向您展示有效的代码。为了简单起见，我只是将所有内容放在一个文件中。

此代码按预期工作。当我单击“First”时，我转到FirstComponent，当我点击“Second”时，即使我将SecondComponent重构为它自己的模块SecondModule，我也得到了SecondComponent，一切正常。

import '../polyfills';

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <nav>
            <a routerLink="/first">First</a>
            <a routerLink="/second">Second</a>
        </nav>    
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }

@Component({
    template: `FirstComponent`
})
export class FirstComponent { }

@Component({
    template: `SecondComponent`
})
export class SecondComponent { }

@Component({
    template: `PageNotFoundComponent`
})
export class PageNotFoundComponent { }

const secondRoutes: Routes = [
    { path: 'second', component: SecondComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(secondRoutes)
    ],
    declarations: [
        SecondComponent,
    ]
})
export class SecondModule { }

const appRoutes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: '', redirectTo: '/first', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes),
        SecondModule
    ],
    declarations: [
        AppComponent,
        FirstComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

但是现在当我进一步将主要路由重构为官方页面上建议的自己的路由器模块时，它就不再起作用了，因为当我现在点击“Second”时，我转到NotFoundComponent而不是SecondComponent。

import '../polyfills';

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <nav>
            <a routerLink="/first">First</a>
            <a routerLink="/second">Second</a>
        </nav>    
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }

@Component({
    template: `FirstComponent`
})
export class FirstComponent { }

@Component({
    template: `SecondComponent`
})
export class SecondComponent { }

@Component({
    template: `PageNotFoundComponent`
})
export class PageNotFoundComponent { }

const secondRoutes: Routes = [
    { path: 'second', component: SecondComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(secondRoutes)
    ],
    declarations: [
        SecondComponent,
    ]
})
export class SecondModule { }

const appRoutes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: '', redirectTo: '/first', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

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

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        SecondModule
    ],
    declarations: [
        AppComponent,
        FirstComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

我正在关注Angular Routing的官方指南，可在此处找到：https://angular.io/docs/ts/latest/guide/router.html

“我做到了”到里程碑3结束，直到遇到这个问题，现在我被困在这里。

编辑：

我已将代码上传到Angular 2 plunker。

以下是没有重构模块的代码：https://plnkr.co/edit/PlWvxDZGnA848OciyRQE?p=preview

以下是重构模块的代码：https://plnkr.co/edit/eYeiI9dRTZP6BDL5KeVQ?p=preview

编辑2：如果我删除通配符，它会起作用：

{ path: '**', component: PageNotFoundComponent }

但是，如果它不能位于应用路由器模块的底部，我应该在哪里定义这个通配符？

Answer 1

宣布路线的顺序很重要。

使用您当前的代码，看起来所有收集的路线列表（在导入所有模块后）如下所示：

{ path: 'first', component: FirstComponent },
{ path: '', redirectTo: '/first', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
{ path: 'second', component: SecondComponent }

路径'second'永远无法到达，因为它被遮蔽了＃34}。 '**'。

要解决此问题，您可以尝试在声明路由SecondModule之前导入AppModule 吗？

@NgModule({ imports: [ BrowserModule, SecondModule, // <!-- Look, I moved it BEFORE RouterModule.forRoot(appRoutes) RouterModule.forRoot(appRoutes), ], // .... }) export class AppModule { }

将Angular路由器重构为它自己的模块并不能按预期工作

1 个答案: