如何检测从一个组件到另一个组件的更改

问题描述 投票:5回答:2

Angular 4. Github source

我有一个由Web服务填充的菜单。 Web服务位于taskService中,但现在不是必需的。

ngOnInit() {
    this.getTasks();
    }
    getTasks(): void {
        this.taskService.getTasks()
            .subscribe(Tasks => this.tasks = Tasks);
    } 

当您单击某个任务时,它会加载一个页面,一个不同的组件,表单已准备好更新数据。它也是由Web服务制作的,工作正常。问题是更新任务后,它没有反映在任务菜单中

我正在导入这个:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

并将其添加到构造函数:

private cdRef: ChangeDetectorRef

在使用save()函数更新数据之后,这是我对detectChanges()函数的最佳方法

  this.taskService.updateTask(task, id)
          .subscribe(
              this.Ref.detach();
              setInterval(() => {
                this.Ref.detectChanges();
              }, 5000);
      );

这是从菜单中打印任务的html:

   <li *ngFor="let task of tasks" class="d-inline-block col-md-12">
        <a routerLink="/task/{{task.id}}" > {{task.title}}</a>
        <!-- <span class="close big"></span> -->
        <button class="close big" title="delete task"
        (click)="delete(task)">x</button>
    </li>

这是更新任务的表单

<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
  <mat-form-field class="example-full-width">
    <label>Task Name</label>
    <input matInput [(ngModel)]="task.name" #taskName name="name">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput [(ngModel)]="task.body" #taskBody name="body"></textarea>

  </mat-form-field>
  <button type="submit" class="btn btn-success" >Save</button>
</form>

两者都有不同的组成部分。

我试图遵循这个tutorial,但我卡住了,我不知道如何使用ChangeDetectorRef。

angular typescript angular2-changedetection
2个回答
3
投票

我看了你的代码。问题是view-task.component更新了您的任务,但navigation.component没有收到有关此交易的通知。我认为BehaviorSubject可能只适合你。

你可以阅读更多关于它here

我假设你在整个应用程序中都有单个tasks数组,你会在navigation组件上显示它们。

Task.service.ts

export class TaskService {
     // behaviorSubject needs an initial value.
     private tasks: BehaviorSubject = new BehaviorSubject([]);
     private taskList: Task[];

     getTasks() {
         if (!this.taskList || this.taskList.length === 0) {
             this.initializeTasks();
         }

         return this.tasks.asObservable();
     }

     initializeTasks() {
          this.http.get('api/tasks')
              .subscribe(tasks => {
                   // next method will notify all of the subscribers
                   this.tasks.next(tasks);
              }, error => {
                   // proper error handling here
              });
     }

     updateTasks(task: Task) {
          this.http.post('api/updateTask')
              .subscribe(resp => {
                   // update your tasks array
                   this.tasks = ...
                   // and call next method of your behaviorSubject with updated list
                   this.tasks.next(this.tasks);
              }, error => {
                   // proper error handling here    
              });
     }
}

Navigation.component.ts

 export class NavigationComponent implements OnInit{
      tasks: Task[];
      constructor(private taskService: TaskService) {}

      ngOnInit() {
          // this method will be called every time behaviorSubject
          // emits a next value.
          this.taskService.getTasks()
              .subscribe(tasks => this.tasks = tasks);
      }
 }

查看-task.component.ts

 export class ViewTaskComponent {
     constructor(private taskService: TaskService) {}

     updateTask(task: Task) {
         this.taskService.updateTask(task);
     }
 }

我自己没有尝试过这段代码。但是,我之前已在我的应用程序中实现了类似的功能。因此,当您尝试并遇到问题时,请告诉我。


2
投票

Angular没有运行changeDetection,因为你没有要求它。 ViewTaskComponent中的实例变量都没有在save方法中更新。

在你的代码中,在updateTask()完成后,它将返回save()中的ViewTaskComponent。但是在this.task的订阅回调中没有与this.taskService.updateTask()的链接。

由于updateTask使用PATCH请求,我假设你没有得到整个Task对象。所以你不能只说this.task = valuePassedToSubscribeCallback

相反,您可以在该订阅回调中调用this.viewTask()并获取整个更新的Task对象。

例如:

this.taskService.updateTask(task, id)
    .subscribe(
        // new line here to fetch the updated Task object
        this.viewTask()
    );

注意:我的第二个@Bunyamin Coskuner建议使用BehaviorSubject(甚至是标准的Subject)。如果您要使用重构器,那么它们是一种在您的服务中管理状态的简洁方法。

© www.soinside.com 2019 - 2024. All rights reserved.