Javascript Angular2-执行queryParam更改,但不会反映在Safari+;IE11
我正在监听组件中queryParam的更改,以便更新和保存活动行的状态。单击行高亮显示该行,使用浏览器上一步按钮标记上一行。行作为活动行。到现在为止,一直都还不错。但还有IE11和Safari 当我在IE 11或Safari中使用浏览器后退按钮时,我的组件get中的代码会被执行,但不会反映在DOM中。当我在NgZone.run(callback)回调函数中运行更改时,它会得到反映 它再现了这种行为:Javascript Angular2-执行queryParam更改,但不会反映在Safari+;IE11,javascript,angularjs,angular,zonejs,Javascript,Angularjs,Angular,Zonejs,我正在监听组件中queryParam的更改,以便更新和保存活动行的状态。单击行高亮显示该行,使用浏览器上一步按钮标记上一行。行作为活动行。到现在为止,一直都还不错。但还有IE11和Safari 当我在IE 11或Safari中使用浏览器后退按钮时,我的组件get中的代码会被执行,但不会反映在DOM中。当我在NgZone.run(callback)回调函数中运行更改时,它会得到反映 它再现了这种行为: import {Component} from '@angular/core' import {
import {Component} from '@angular/core'
import { Http, Response } from '@angular/http';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'list-component',
styles: [`
.isActive {
background: gray;
}
`],
template: `
<div class="debuggerBox">
Selected row index: {{ selectedIndex || 'none' }}
<br>
<div>Selected Item: {{ itemDetail | json }}</div>
</div>
<ul>
<li *ngFor="let item of listData; let i = index"
[class.isActive]="selectedIndex == item.index">
<a [routerLink]="['/']" [queryParams]="{selectedIndex: item.index}">Index {{item.index}}, Name {{item.name}}</a><br>
</li>
</ul>
`,
directives: [ROUTER_DIRECTIVES]
})
export class ListComponent {
listData: any = [
{index: 0, name: 'Item #0'},
{index: 1, name: 'Item #1'},
{index: 2, name: 'Item #2'},
{index: 3, name: 'Item #3'},
{index: 4, name: 'Item #4'}
];
selectedIndex: number;
itemDetail: any = {};
constructor(private http: Http, private router: Router) {
}
ngOnInit() {
this.router.routerState.queryParams.subscribe(params => {
if (params.hasOwnProperty('selectedIndex')) {
console.log('queryParams.selectedIndex change detected');
this.selectedIndex = params['selectedIndex'];
this.loadItemDetail(this.selectedIndex);
}
});
}
loadItemDetail(index) {
console.log('load item #' + index);
this.itemDetail = {};
this.itemDetail = this.listData[index];
console.log('loaded item #' + index);
}
}
从'@angular/core'导入{Component}
从'@angular/Http'导入{Http,Response};
从'@angular/Router'导入{Router,Router_指令};
@组成部分({
选择器:“列表组件”,
风格:[`
.我很活跃{
背景:灰色;
}
`],
模板:`
选定行索引:{{selectedIndex | |'none'}
所选项目:{{itemdail}json}
-
索引{item.Index},名称{{item.Name}}
`,
指令:[路由器指令]
})
导出类ListComponent{
listData:any=[
{索引:0,名称:'Item#0'},
{索引:1,名称:'Item#1'},
{索引:2,名称:'Item#2'},
{索引:3,名称:'Item#3'},
{索引:4,名称:'Item#4'}
];
selectedIndex:编号;
itemDetail:any={};
构造函数(专用http:http,专用路由器:路由器){
}
恩戈尼尼特(){
this.router.routerState.queryParams.subscribe(参数=>{
if(params.hasOwnProperty('selectedIndex')){
log('queryParams.selectedIndex检测到更改');
this.selectedIndex=params['selectedIndex'];
this.loadItemDetail(this.selectedIndex);
}
});
}
loadItemDetail(索引){
console.log('加载项#'+索引);
this.itemDetail={};
this.itemdail=this.listData[index];
console.log('loaded item#'+索引);
}
}
最近提交了一个修复程序。我建议你在RC.5退出后再试一次。@GünterZöchbauer你知道哪个提交吗?我想深入研究并理解“为什么”。这是关于无法在这些浏览器上正常工作的事件处理程序的区域和多边形填充。我目前只在我的手机上…最近有一个修复程序。我建议你在RC.5退出后再试一次。@GünterZöchbauer你知道哪个提交吗?我想深入研究并理解“为什么”。这是关于无法在这些浏览器上正常工作的事件处理程序的区域和多边形填充。我现在只在我的手机上。。。