angular - 如何在 Angular 中正确刷新组件模板？

Question

我正在使用带有观察者订阅的服务。这是我的接口(interface)服务:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class InterfaceService {
  private contentFlag = new Subject();

  public getContent(): any {
    return this.contentFlag;
  }

  public change(): void {    
    this.contentFlag.next(true);  
  }
}

这是我的组件:

import { Component, OnInit } from '@angular/core';
import { InterfaceService } from '../../-services/interface.service';

@Component({
  selector: 'app-main-content',
  template: `<div *ngIf="showContent"> My Content </div>`  // why it is always hidden ?
})

export class MainContentComponent implements OnInit {
  private content$: any;
  public showContent = false;

  constructor(private interfaceService: InterfaceService) {}

  ngOnInit() {
    this.content$ = this.interfaceService.getContent();

    this.content$.subscribe(function(data) {
      this.showContent = data;      
      console.log('Here comes true:', data); // it works - here shows true
    });
  }
}

当其他组件使 interfaceService.change() 时，我在控制台中得到“true”。

但是Component模板中没有反应。 <div *ngIf="showContent"> My Content </div>总是隐藏的。

我究竟做错了什么？我应该刷新订阅中的模板吗？如何？还是架构有问题？

Answer 1

试试 ngAfterViewInit()而不是 ngOnInit()

ngAfterViewInit() {
this.content$ = this.interfaceService.getContent();

this.content$.subscribe(function(data) {
  this.showContent = data;      
  console.log('Here comes true:', data); // it works - here shows true
});
}