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

description:

1. in project, set android phone's "backbutton" event fired through cordova interface (document event).

result:

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

ps:

1. router.navigate work if 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');   } 

}

using zone.run solved problem.

ngzone maintain rerendering in angular.

i guess problem met caused event listener outside of angular, however, callback affect view.

so zone.run() force rerender view.

constructor(     private render: renderer2,     private _zone: ngzone   ) {     this.render.listen('document', 'backbutton', ()=>{       this.backbuttonevent();     })   }  private backbuttonevent(){   this._zone.run(     () => {       this.router.navigate(['/home'])     }   ) } 

wiki