等待异步方法中的角度重定向奇怪的行为

Question

我的应用程序可以正常接收 FCM 消息通知，但在尝试触发路由器导航时（如果收到呼叫，我想显示一个看起来像标准 Android 来电页面的页面）。我有一个简单的 PushNotificationReceived 侦听器，

 await PushNotifications.addListener('pushNotificationReceived', notification => {
      this.logger.info(`[PUSH NOTIFICATION] - Push notification received: [Title: ${notification.title}, Body : ${notification.body}]`);

      if (notification.data && notification.data.IncomingCall) {
        this.logger.info(`INCOMING CALL FROM ${notification.data.CallerName}`);
        this.router.routeReuseStrategy.shouldReuseRoute = () => false;
        this.router.onSameUrlNavigation = 'reload';
        this.router.navigate(['/incomingcall']);
      } else {
        this.showNotificationDialog(notification.title || '', notification.body || '');
      }
    });

但是当此代码执行时，屏幕不会改变，并且似乎稍微“损坏”，因为控件/点击没有响应。

我添加了路由器调试，它显示路由正在发生，但似乎没有完成，因为我已经登录了应该注销的组件 ngInit。

Line 1 - Msg: %c2022-03-23T13:43:07.094Z INFO [main.1554ef6f3488783a.js:1:377716] color:gray [PUSH NOTIFICATION] - Push notification received: [Title: Incoming call, Body : undefined]
 Line 1 - Msg: %c2022-03-23T13:43:07.095Z INFO [main.1554ef6f3488783a.js:1:377850] color:gray INCOMING CALL FROM Frank
 Line 1 - Msg: Router Event: pg
 Line 1 - Msg: NavigationStart(id: 2, url: '/incomingcall')
 Line 1 - Msg: Router Event: FB
 Line 1 - Msg: RoutesRecognized(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall', state: Route(url:'', path:'') { Route(url:'incomingcall', path:'incomingcall') } )
 Line 1 - Msg: Router Event: NB
 Line 1 - Msg: GuardsCheckStart(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall', state: Route(url:'', path:'') { Route(url:'incomingcall', path:'incomingcall') } )
 Line 1 - Msg: Router Event: HB
 Line 1 - Msg: ChildActivationStart(path: '')
 Line 1 - Msg: Router Event: jB
 Line 1 - Msg: ActivationStart(path: 'incomingcall')
 Line 1 - Msg: Router Event: LB
 Line 1 - Msg: GuardsCheckEnd(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall', state: Route(url:'', path:'') { Route(url:'incomingcall', path:'incomingcall') } , shouldActivate: true)
 Line 1 - Msg: Router Event: VB
 Line 1 - Msg: ResolveStart(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall', state: Route(url:'', path:'') { Route(url:'incomingcall', path:'incomingcall') } )
 Line 1 - Msg: Router Event: BB
 Line 1 - Msg: ResolveEnd(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall', state: Route(url:'', path:'') { Route(url:'incomingcall', path:'incomingcall') } )
 Line 1 - Msg: Router Event: UB
 Line 1 - Msg: ActivationEnd(path: 'incomingcall')
 Line 1 - Msg: Router Event: $B
 Line 1 - Msg: ChildActivationEnd(path: '')
 Line 1 - Msg: Router Event: Nl
 Line 1 - Msg: NavigationEnd(id: 2, url: '/incomingcall', urlAfterRedirects: '/incomingcall')
 Line 1 - Msg: Router Event: ME
 Line 1 - Msg: Scroll(anchor: 'null', position: 'null')

我的 app.component.html 只是一个 Home.Component 用作布局，因此拥有自己的路由器出口。路由器模块

const routes: Routes = [
  {
    path: 'incomingcall',
    component: IncomingCallComponent
  }, 
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        redirectTo: '/contacts',
        pathMatch: 'full'
      },
      { path: 'contacts', component: ContactsComponent },
....

在每个组件的路由器出口周围放置文本标签后，我注意到新页面几乎正在工作，因为它显示在app.component路由器中出口，但 home.component 路由器出口内的页面继续显示！像这样，

<Appcomponent-router-outlet>
    <HomeComponent-router-outlet>
        <Contacts Page>
    </HomeComponent-router-outlet>
        <IncomingCall Page>
</Appcomponent-router-outlet>

我尝试在 stackblitz 中重新创建此问题，但无法重现该问题 - 我怀疑是由于 PushNotification.addListener 未忠实重现，但以防万一它有帮助 在这里

Answer 1

我发现解决方法是在 ngZone 内运行路由器导航，如下所示，

  this.zone.run(() => this.router.navigateByUrl('/incomingcall'));

我想它会强制对更大区域进行更高级别的更改检测。

希望这对其他可能遇到同样情况的人有用。