Angular 4中如何在新标签页正确打开静态帮助网页？

我来帮你搞定这个问题！出现这种情况主要是两个原因：Angular的单页路由接管了跳转行为，加上静态文件的路径配置不对。按下面的步骤调整就能解决：

1. 调整静态文件存放位置 #

把你的Help.htm放到项目的assets文件夹里（没有的话直接新建一个），Angular默认会把这个目录下的文件作为静态资源编译发布，这样才能保证访问路径的正确性。

2. 修改模板与组件代码 #

模板部分 #

给a标签加上阻止默认跳转的逻辑，避免Angular路由干扰：

<a href="javascript:void(0)" (click)="Help()"> Help </a>

或者也可以通过事件对象阻止默认行为：

<a href="" (click)="Help($event)"> Help </a>

组件部分 #

更新Help()方法的路径，同时确保窗口打开的是正确的静态资源：

Help(event?: Event) {
  // 传入事件时阻止默认跳转行为
  if (event) {
    event.preventDefault();
  }
  // 指向assets目录下的静态页面
  window.open('./assets/Help.htm', '_blank', 'status=0,scrollbars=1,resizable=1,location=1');
}

3. 验证配置（可选） #

如果还是有问题，检查下angular.json里的assets配置，确保assets目录被正确包含：

"assets": [
  "src/assets",
  "src/favicon.ico"
]

这个配置默认是存在的，但如果之前修改过项目配置，最好确认一下。

现在点击Help链接，新标签页应该会直接加载静态的Help.htm页面，不会带上Angular的路由#/，也不会触发应用重载了。

内容的提问来源于stack exchange，提问作者thomess