Question

我刚开始学习Angular 2，我用 Angular2VisualStudioTemplate 模板创建了一个Angular 2应用程序。在我的app-routing.module.ts中，我宣布了下一条路线：

const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', component: LoginComponent },
    { path: 'distribution', component: DistributionComponent },
    { path: 'dashboard', component: DashboardComponent }
];

根组件只有<router-outlet></router-outlet>指令。在LoginComponent视图中，有一个带有[routerLink]="['/dashboard']指令的输入，因此当用户点击该按钮时，您可以导航到/dashboard。

问题是，如果我想导航到/dashboard或任何其他路径，在broswer的导航栏中键入URL它就不起作用。该页面仅显示登录视图，并且不会更改为dashboard组件或任何其他组件。请注意，我没有实现一些登录机制，只有虚拟视图和组件。

我看到类似的问题涉及像我这样的问题，但我无法弄清楚如何解决这个问题。提前致谢

Answer 1

您的app.module.ts是否有此import数组或类似内容？

@NgModule({ 
imports: [ 
RouterModule.forRoot(routes)
// other imports here 
], ...
 })

Answer 2

你可以尝试添加这个{provide：LocationStrategy，useClass：PathLocationStrategy}，

@RahulSingh提供的评论是我的问题的解决方案。所以文件app-routing.module.ts现在看起来像：

/* code */
@NgModule({
    imports: [ RouterModule.forRoot(routes)],
    exports: [ RouterModule ],
    providers: [
        { provide: LocationStrategy, useClass: PathLocationStrategy },
        { provide: APP_BASE_HREF, useValue: '/' },
    ],
})
/* code */

Angular 2深层链接无法正常工作

2 个答案: