Question

我有一个复杂的表单，我已将其简化为此问题的目的，并作为plunk托管。

“编辑”openEditor(i: number, isEditor: boolean)，“添加”和“保存更改”moveToItem()的三个onclick函数都使用window.location.hash 导航到编辑器，否则在非活动时隐藏。

它按预期工作，但不是在chrome中。我收集它与chrome执行页面刷新有关，因为它将哈希更改视为生成新URL

问题：

有人可以提供一个相对简单的解决方案，适用于chrome（以及example）吗？

未能确定在表单中管理编辑器的最佳方法是什么？

我考虑过为编辑器创建一个单独的子组件，因为FormComponent中有很多内容）但不确定这有助于解决这个问题，因为我仍然需要导航到它所在的页面中的点和然后回到适当的数据。

编辑器需要存在于表单中并访问/更新表单数据。

我尝试过的一些事情：

在之前将哈希设置为空或空：

window.location.hash = null;
window.location.hash = '';

在值

之前加上＃

window.location.hash = '#form-editor';

也：

(<HTMLScriptElement>document.querySelector('#' + 'form-editor')).scrollIntoView();

并且使用pushState我可以改变url但它不会移动到锚点：

window.history.pushState(null, null, '#form-editor');


window.history.replaceState(null, null, '#form-editor');

其他信息：

'添加'功能是在选择项目后在列表中添加新项目

表单编辑器的锚点是：

<div id="form-editor">

并为每个项目编号创建动态ID：

<div id="item{{i}}">Item: {{i}}</div>

谢谢！

Answer 1

在一个Chrome刷新错误（源自Safari）上，我读到只有单击锚点（其中href指向我们想要的哈希位置）才有效。因此，我们必须编写一些可以做到的事情，例如从body开始：

<body unbeforeunload="whereWeWantToScroll.click()">
  <a id="whereWeWantToScroll" href="#form-editor" style="display: none">
    Reposition to the right place
  </a>

在此示例中，锚点是隐藏的，但如果只有position: fixed触发，则锚点应为unbeforeunload。

window.location.hash解决了chrome / angular2

1 个答案: