路由器无法在 Angular4 + Cordova 中使用 listener("renderer2") 正常导航，

Question

描述：

在项目中，我们将设置 Android phone 的 "backbutton" 事件通过 cordova 接口（文档事件）触发。

结果：

单击 "back button" 后，视图变为空白。
router outlet控制台成功改成/home（我做了一些登录：router-outlet active event）
当视图变为空白（我认为它确实改变了路线）时，我单击 diff router-outlet（页脚），主页将出现！

PS:

router.navigate 如果我不使用 renderer2 listener

代码：

constructor(private render: Renderer2, private router: Router,) {
this.render.listen('document', 'backbutton', ()=>{
  this.backButtonEvent();
})

}

private backButtonEvent(){
this.router.navigate(['/home']).then(
  ()=>{
    console.error('Navigate success');
  },
  ()=>{
    console.error('Navigate failed');
  }

}

Answer 1

使用 zone.run 解决了我的问题。

ngZone 在 angular 中保持重新渲染。

我猜我遇到的问题是angular之外的事件监听器引起的，但是，我的回调会影响视图。

所以 zone.run() 强制重新渲染视图。

constructor(
    private render: Renderer2,
    private _zone: NgZone
  ) {
    this.render.listen('document', 'backbutton', ()=>{
      this.backButtonEvent();
    })
  }

private backButtonEvent(){
  this._zone.run(
    () => {
      this.router.navigate(['/home'])
    }
  )
}

路由器无法在 Angular4 + Cordova 中使用 listener("renderer2") 正常导航，

Router couldn't navigate normally with listener("renderer2") in Angular4 + Cordova,

renderer

cordova

angular