为什么 Observable 变量的变化会触发 View Angular 的变化答案

【问题标题】：Why change in Observable variable triggers change in View Angular为什么 Observable 变量的变化会触发 View Angular 的变化
【发布时间】：2019-09-17 03:01:35
【问题描述】：

我正在学习 Angular，所以我正在构建待办事项应用程序。 Todos 是从 API 中获取的，每个都有一个作为父项目的项目。在一个视图中，我正在添加新项目，该项目会触发服务中的 addNewProject 方法，该方法又会触发对另一个服务中 API 的 POST 请求。项目列在侧边栏中，绑定到父组件的输入。 ProjectsService 在私有字段中保存项目数组，并具有主要组件使用的可观察对象。

我很难理解为什么在服务中的 API 调用之后附加私有属性 _projects 会触发 MainComponent 属性的更改，即使 _projects 是私有的并且从数组中更改 Observable 不应触发从 Observers 传递的函数。

家长：

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  projects: Project[] = new Array<Project>();

  constructor(private projectsService: ProjectsService) {
  }

  ngOnInit() {
    this.projectsService.projects$.subscribe((projects) => {
      this.projects = projects;
    });
  }

  addNewProject(newProjectName: string) {
    this.projectsService.addNewProject(newProjectName);
  }

}

侧边栏：

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  @Input() projects: Project[];
  @Output() projectEntered = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit() {
  }

  projectAdded(projectName: string) {
    this.projectEntered.emit(projectName);
  }

}

服务：

export class ProjectsService {

  private _projects$: Observable<Array<Project>> = new Observable<Array<Project>>();
  private _projects: Project[] = [];
  private _loadedProject$: Observable<Project>;
  private _projectsLoaded: boolean;
  private _taskForProject: object;

  constructor(private userService: UserService, private api: ApiService) {
  }

  loadAllProjects() {

    this._projects$ = this.api.getAllProjectsByUserId(this.userService.userId).pipe(
      map((projects) => {
        this._projects = projects;
        return this._projects;
      })
    );
  }

  get projects$() {
    if (!this._projectsLoaded) {
      this.loadAllProjects();
    }
    return this._projects$;
  }

  getAllTasks() {
    return this.api.getAllTasksByUserId(this.userService.userId);
  }

  getProject(projectId: string) {
    this._loadedProject$ = this.api.getProjectById(projectId);
    return this._loadedProject$;
  }

  getTodayTasksForProject(tasks: Task[]) {
    const todayTasks: Task[] = [];
    const todayDate = new Date();
    tasks.forEach((task) => {
      if (new Date(task.completionPlannedDate).getDate() === todayDate.getDate()) {
        tasks.splice(tasks.indexOf(task), 1);
        todayTasks.push(task);
      }
    });
    return todayTasks;
  }

  getTomorrowTasksForProject(tasks: Task[]) {
    const tomorrowTasks: Task[] = [];
    const tomorrowDate = new Date(new Date().getDate() + 1);
    tasks.forEach((task) => {
      if (new Date(task.completionPlannedDate).getDate() === tomorrowDate.getDate()) {
        tasks.splice(tasks.indexOf(task), 1);
        tomorrowTasks.push(task);
      }
    });
    return tomorrowTasks;
  }

  getUpcomingTasks(tasks: Task[]) {
    const upcomingTasks: Task[] = [];
    const upcomingDate = new Date(new Date().getDate() + 2);
    tasks.forEach((task) => {
      if (new Date(task.completionPlannedDate).getDate() > upcomingDate.getDate()) {
        tasks.splice(tasks.indexOf(task), 1);
        upcomingTasks.push(task);
      }
    });
    return upcomingTasks;
  }

  addNewProject(projectName: string) {
    this.api.postNewProject({
      id: null,
      userId: this.userService.userId,
      title: projectName,
      tasks: []
    }).subscribe((project: Project) => {
      this._projects.push(project);
    });
  }
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

请看here:

基本上，应用程序状态的变化可能是由三件事引起的：

事件 - 点击、提交

XHR - 从远程服务器获取数据

定时器 - setTimeout(), setInterval()

如果您不想触发更改检测，请尝试更改为 ChangeDetectionStrategy.OnPush

【讨论】：