Question

我正在讨论这个简单的用例，但我无法弄明白。

我有以下路由：

const routes: Routes = [
    {path: '', redirectTo: 'app', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'app', component: DssComponent},
    {path: '**', redirectTo: 'app'},
];

在我的app模块中：

import {routes} from '@app/app-routing';
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
         CoreModule,
         SharedModule,
         DssModule,             
         RouterModule,
         RouterModule.forRoot(routes, {enableTracing: true})
        ],
        bootstrap: [
            AppComponent
        ]
    })
    export class AppModule {}

我的CoreModule看起来像：

@NgModule({
    imports: [
        CommonModule,
        HttpClientModule,
    ],
    declarations: [],
    providers: [
        AuthenticationService,
        CanActivateAuthGuard
    ]
})
export class CoreModule {}

我的SharedModule看起来像：

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        BrowserModule,
        HttpClientModule
    ],
    declarations: [LoginComponent],
    exports: [
        CommonModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        LoginComponent
    ],

})
export class SharedModule {}

我的DssModule看起来像：

@NgModule({
    imports: [
        CoreModule,
        SharedModule
    ],
    declarations: [
        DssComponent
    ],
    exports: [
        DssComponent
    ]
})
export class DssModule {}

在ng serve之后，我似乎无法匹配＆＃34; / login＆＃34;。

当我输入/login时，网址会转到http://localhost:4200/login/app。

我没有得到这个，看到跟踪信息，它似乎只匹配斜杠（/）：

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 1, url: '/')
platform-browser.js:367 NavigationStart {id: 1, url: "/"}
core.js:3675 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/app", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 GuardsCheckStart {id: 1, url: "/", 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: 'app')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 ResolveStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 ResolveEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
dss.component.ts:19 dsscomponent!
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'app')
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: 1, url: '/', urlAfterRedirects: '/app')
platform-browser.js:367 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/app"}

我输入的内容无关紧要，我被重定向到＆＃39; xxx / app＆＃39;

解：我不知道为什么，但解决这个问题的方法是删除我的节点模块＆＃39;文件夹并执行＆＃34; npm install＆＃34;再次。那很有效。令人毛骨悚然的东西。

Answer 1

你的拳头张贴的代码看起来很好，你环境中的其他东西导致了这个问题。

真正的问题可归结为，您是否将<router-outlet>置于主要组件中，是否声明或导入该模块中所有已使用的组件

将app.module.ts与app-routing.module.ts分开来保存更整洁的模块文件非常普遍。

请参阅下文，了解您使用所提供信息处理的第一篇文章。

Reproduced on stackblitz as is

Answer 2

您需要在导入中加入RouterModule,和RouterModule.forRoot(routes, {enableTracing: true})。 forRoot()用于启用子导航

无法识别Angular 5路径路径

2 个答案: