angular - 在 Component Angular 4 中使用 Behavior Subject 和 subscribe 进行更改检测

Question

我坚持在服务层内为多个组件设置变更检测。下面我将仅展示一个组件来说明对行为主题的订阅。我没有收到任何错误，只是没有显示数据。 http 请求有效。我只使用了两种方式的数据绑定(bind)，但我需要能够在整个项目中更新多个组件。我认为行为主题可能是最好的选择，但我在这里可能是错的。我真的不知道/不明白我做错了什么。感谢您提供任何帮助的建议。

问题出在 getProjects() 函数中。通过订阅获取请求，在 View 显示之前永远不会调用结果或错误。

@Injectable()
export class ProjectService {
  private projectsUrl: string = Globals.url + '/projects';

  private getProjectsSource = new BehaviorSubject<any>([]);
  getProjectsChange = this.getProjectsSource.asObservable();

  private errorSource = new BehaviorSubject<any>({});
  errorChange = this.errorSource.asObservable;

  private projects: Project[] = [];


  constructor(private http: Http) { }

  getProjects() {
    if (this.projects != null) {
      this.getProjectsSource.next(this.projects);
    }
    else {

      this.http.get(this.projectsUrl, Globals.getTokenHeaders())
        .map(function (res) {
          let data = res.json();

          if (data) {
            for (let project of data.projects) {
              this.projects.push(Project.create(project));
            }
            return this.projects;
          }
        })
        .catch((error: any) => Observable.throw(error || 'Server error'))
        .subscribe(
          result => {
            this.projects = result;
            this.getProjectsSource.next(this.projects);
          },
          error => {
            this.errorSource.next(true);
          });
    }
  }
}

这是订阅服务中行为主题设置的组件。我在构造函数中调用服务的 getProjects() 方法来触发组件构造的更改。我在 ngOnIt 函数中订阅了它。

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html'
})
export class NavBarComponent implements OnInit {

  projects: Project[] = [];
  projectsFlag: boolean = false;


  constructor(private projectService: ProjectService) {
    this.projectService.getProjects();
  }

  ngOnInit() {
    this.projectService.getProjectsChange.subscribe(result => {
      this.projects = result;
    },
    err => {
        // handle error in template through flag (need to setup flag)
    });
  }
}

编辑:我一次获取了所有项目，但是诸如更新或删除之类的 crud ops 都在缓存和服务器上更新了。因此，当项目发生更新时，它需要更新订阅特定可观察对象的每个组件，在本例中我使用的是行为主题。

Answer 1

你有几个问题。最大的来自于这个if:

if (this.projects != null){}
else {/* http request to get projects */}

您的 else 永远不会被触发，因为 this.projects 不是 null。你用

将它设置为空数组

private projects: Project[] = [];

因此您应该将其设置为 null，或者根本不设置它。