小编Mac*_*ych的帖子

createUrlTree 忽略“useHash: true” RouterModule 配置

在具有“useHash: true”路由器模块配置的 Angular 7 单页应用程序中,我需要生成要在新选项卡中打开的资源的 url。

对于应用程序窗口中的路由,以下代码按预期工作:

this.router.navigate(['foo', 1]);

这意味着,它生成的 url 如下: http://localhost:4200/#/foo/1

虽然使用以下方法时: const url = this.router.createUrlTree(['foo', 1]).toString();

url 是“/foo/1”——没有“#”,所以...

window.open(url, '_blank'); 结果与无效的网址:

http://localhost:4200/foo/1

我发现的唯一解决方案(黑客)非常残酷:

window.open('#' + url, '_blank');

RouterModule.forRoot(routes, {
  useHash: true,
  onSameUrlNavigation: 'reload',
}

Run Code Online (Sandbox Code Playgroud)
showItem(item: Item) {
  // THIS WORKS AS EXPECTED
  this.router.navigate(['item', item.id]);
}

showItemInNewTab(item: Item) {
  const url  = this.router.createUrlTree(['item', item.id]).toString();

  // THIS WORKS BUT ITS A HACK :/
  window.open('#' + url, '_blank');
}

Run Code Online (Sandbox Code Playgroud)

angular angular-router angular7

9
推荐指数
1
解决办法
510
查看次数

标签 统计

angular ×1

angular-router ×1

angular7 ×1