Angular 2路由订阅变化检测

Question

鉴于此代码:

ngOnInit() {
    this.apiService.getBlogPosts().subscribe(blogPosts => {
        this.allBlogPosts = blogPosts;

        this.changeDetector.detectChanges();
    }));
}

我试图理解为什么我被迫使用 this.changeDetector.detectChanges();

情况是，如果我第一次加载我的博客路由，如果我路由到另一个页面(另一个组件或相同的组件)，我的帖子加载得很好。 “blog”组件来显示特定帖子的详细信息(例如“blog/my-post”))，然后我路由回到根目录的“blog”组件('blog/')，这一次，模板无法更新帖子。我可以在我的 Inspect、Network 选项卡中看到获取帖子的路由仍然有效，console.log 显示一切似乎很好，但是除非我强制进行更改检测，否则模板无法更新。这是预期的行为吗？可以补救吗？这看起来很奇怪...

另一件值得注意的事情是，我第一次和第三次访问我使用的“博客”组件:

this.router.navigate([`/${url}`]);

要导航到它...这也是没办法的...

编辑: getBlogPosts() 方法位于我的 ApiService 中，我将其注入(inject)到我的 BlogComponent 中:

public getBlogPosts() : Observable<BlogPost[]> {
    return this.http.get(`${ environment.apiUrl }GetBlogPosts`, { headers: this.headers })
                    .map((response: Response) => <BlogPost[]>response.json());
}

Answer 1

Angular 使用 NgZone 在应该运行更改检测周期时收到通知。 NgZone 在底层使用 zone.js 来拦截所有异步操作，例如 setTimeout、new Promise、 XHR 请求等。因此通常无需开发人员进行任何额外的努力即可工作。

但是，如果您的某些操作未被 zone.js 捕获，您将不会触发更改检测，并且必须手动执行此操作。但是您可以使用 NgZone 在 Angular 区域中执行某些操作，这意味着 Angular 将在回调执行完成后运行更改检测。

所以根据你的情况，你可以尝试这样的事情:

this.routerSubject.subscribe((url: string) => { NgZone.run(() => this.router.navigate([/${url}]); });

其中 NgZone 可以注入(inject)到任何 Angular 组件或服务中:

constructor(zone: NgZone) {}