Angular 路由更改 # 来自 url

Question

我正在将 AngularJs 项目升级到 Angular 6. 早些时候打开任何页面，我使用了 $state :

$state.transitionTo(stateName, {}, {reload: true});

现在 Angular 中引入了路由。我已完成所有必要的更改，以从生命线页面上添加的 link 打开页面生命线详细信息页面。

变化是：

app.main.ts

export const routes: Route[] = [
    {
        path: 'life-line-details',
        component: LifeLineDetailsComponent
    }
];

@NgModule({
    imports: [
        RouterModule,
        BrowserModule,
        UpgradeModule,.....      
        RouterModule.forRoot(routes)
    ]

生活-line.html

<td><a routerLink="/#/life-line-details"(click)="detailLifeLine(lLine)">Details</a></td>

生活-line.component.ts

 detailLifeLine = function (lLine) { 
        this.router.navigateByUrl("/#/life-line-details");
    }

此外，我已经验证了导航方法。但是不行。

life-line-details.html 是一个单独的页面，应该从上面的操作中打开，我的项目 url 应该更改为： http://192.168.1.12:8080/#/life-line-details 但它变为 http://192.168.1.12:8080/%23/life-line-details

我尝试为传递给 routerLink 和 navigate 方法的 url encodeURI 和 encodeURIComponent。但是 none 有效，我无法打开页面，因为 %23 代替了 #.

我该如何解决这个问题？

Answer 1

在 angular 中，您只需像往常一样使用 url（没有预先的散列），如果您希望路由器使用 url 前面的散列，您需要使用HashLocationStrategy.

所以你必须将 routerLink="/#/life-line-details" 更改为 routerLink="/life-line-details"。

您可以像这样配置路由器：

RouterModule.forRoot(routes, {
  useHash: true,
})

Angular 路由更改 # 来自 url

Angular routing changing # from url

angular

angular-ui-router