Question

我正在将AngularJs项目升级到Angular6。早先打开任何页面，我都使用$ state：

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

现在引入了角路由。我已经进行了所有必需的更改，才能从生命线页面上添加的链接打开页面生命线详细信息页面。

更改为：

app.main.ts

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

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

life-line.html

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

life-line.component.ts

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

此外，我已经实现了导航方法。但是不会起作用。

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

我尝试对传递给routerLink和Navigation方法的URL进行encodingURI和encodeURIComponent。但是没有任何效果，由于％23代替＃，我无法打开页面。

如何解决该问题？

Answer 1

在angular中，您只需照常使用url（无需预先哈希），如果您希望路由器使用url的hash infront，则需要使用HashLocationStrategy。

因此，您必须将routerLink="/#/life-line-details"更改为routerLink="/life-line-details"。

您可以这样配置路由器：

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

角度路由从URL更改＃

1 个答案: