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

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 或任何其他路径，在浏览器的导航栏中输入 URL 是行不通的。该页面仅显示登录视图，不会更改为 dashboard 组件或任何其他组件。请注意，我还没有实现一些登录机制，只有虚拟视图和组件。

我见过类似的问题，指的是像我这样的问题，但我不知道如何解决这个问题。提前致谢

Answer 1

你的 app.module.ts 有这个 import 数组或类似的数组吗？

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

Answer 2

can you try adding this {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 深层链接无法正常工作

Angular 2 deep linking not working properly

deep-linking

angular2-routing

angular