window.location.hash变通铬/ angular2

问题描述 投票:1回答:1

我有一个复杂的形式,我已经简化了这个问题的目的和托管的plunk

对于“编辑” openEditor(i: number, isEditor: boolean)三个的onclick功能,“添加”和“保存更改” moveToItem()都使用window.location.hash导航到该否则隐藏不活动时的编辑。

它的工作原理是预期,但无法在Chrome。我收集它与Chrome浏览器做做一个页面刷新,因为它认为哈希变化生成一个新的URL

题:

有人可以提供一个相对简单的修复,将镀铬(以及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>

谢谢!

javascript google-chrome location angular2-forms
1个回答
0
投票

在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

© www.soinside.com 2019 - 2024. All rights reserved.