angular 2+ ngIf div 只有在点击页面后才会出现

Question

我在主页上有 Google 个地图，我试图在关闭地图上显示的信息 window 时将用户引导至另一个页面：

// Google map info window code snippet from a @Directive
infowindow.addListener('closeclick', () => {
  this.router.navigate(['/users', user.id]);
});

// Component code
ngOnInit() {
  this.user$ = this.route.params.switchMap((params: Params) => this.service.getUser(params['id']));
}

// UserService
getUser(id: String): Observable < User > {
  return this.apollo.watchQuery < GetUserQueryResult > ({
    query: GetUserQuery,
    variables: {
      id: id
    }
  }).map(({
    data
  }) => data.User);
}

<div *ngIf="user$ | async as user" class="container">
  <p>user.name</p>
</div>

问题是，当我进入用户页面时，div 永远不会显示，除非实际单击该页面一次。怎么了？

Answer 1

运行 angular 区域中的处理程序代码应该可以帮助您

import { NgZone } from '@angular/core';

...
constructor(private zone: NgZone) {}

infowindow.addListener('closeclick', () => {
  this.zone.run(() => this.router.navigate(['/users', user.id]));
});

另见

angular 2+ ngIf div 只有在点击页面后才会出现

angular 2+ ngIf div not appearing except after clicking on page

angular

apollo

angular2-changedetection

ngoninit