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

Question

Description:

1. In project, we will set Android phone's "backbutton" event fired through cordova interface (document event).

Result:

1. After I click "back button", the view turn to blank.
2. The router outlet console did success changed to /home(I have done some log in: router-outlet active event)
3. when view to to blank(and I thought it did change route), I click the diff router-outlet(footer), and the home will appear !

PS:

1. router.navigate work well if I didn't use renderer2 listener

Code:

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

Using zone.run solved my problem.

ngZone maintain rerendering in angular.

I guess the problem I met was caused by the event listener outside of angular, however, my callback will affect the view.

So zone.run() force to rerender the view.

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

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