如何在两个不同的组件之间共享数据？

Question

我正在尝试将选定项目的列表从一个组件共享到另一个组件。我创建了一个服务来声明列表：

  public selectedTasksToUnassign = [];

然后在这个组件中我尝试设置列表值：

component_1.ts

checkTask(task) {
if (task) {
  if (this.selectedTasks.includes(task)) {
    this.selectedTasks.splice(this.selectedTasks.indexOf(task), 1);
  } else {
    this.selectedTasks.push(task);
  }
} else {
  if (this.selectedTasks.length < this.tasks.length) {
    this.selectedTasks = [];
    Array.prototype.push.apply(this.selectedTasks, this.tasks);
  } else {
    this.selectedTasks = [];
  }
}
this.tasksToSelect.emit(this.selectedTasks);
this.formService.selectedTasksToUnassign=this.selectedTasks;
console.log("task to unassign from table", this.formService.selectedTasksToUnassign);
  }

在这个组件中，我想获取列表： component_2.ts

 ngOnInit() {
console.log("test tasks to unassign",this.formService.selectedTasksToUnassign);
 }

事实上，我看到每次我检查 table 中的项目时，列表都会在 component_1.ts 中的 console.log 中更新，并且我看到值已添加，但在 component_2.ts 中的 console.log 中，它只显示我选择的第一个值!!!

Answer 1

这是因为该服务使用的是常规值。如果您希望值在每次更改时更新。您需要使用 observables 来保存值。

然后在component_2.ts，你会订阅值

共享服务

  public selectedTasksToUnassignSubject = new Behaviour Subject<Array<Tasks>>([]);

这会将 selectedTasksToUnassignSubject 的值保留在行为主题中。任何想要读取它的值的组件都可以订阅它。因此，每当行为主题更新时，所有订阅者都会得到更新。

更新组件 1 内的行为主题

service.selectedTasksToUnassignSubject.next(tasks);

订阅行为主体的价值

service.selectedTasksToUnassignSubject.subscribe(data=>{
//Code To Run Whenever the value of task changes
})

我可以想象 rxjs 会变得相当混乱，尤其是当您刚开始使用 angular 时。但它们非常有用，一旦您了解了它们的工作原理，您就会爱上它们。

Answer 2

那是因为（我假设）您每次与任务列表交互时都会调用 checkTask()。因为 checkTask() 包含 console.log，您会在 component_1.

中的每次互动中看到它

但是，在 component_2 上，您在 ngOnInit() 上有一个 console.log，它只在加载组件时运行一次。这就是为什么您只看到第一个 console.log.

如果您将 formService.selectedTaskToUnassign 绑定到 component_2 的模板，您将看到它会在每次 component_1 改变其值时更新。

component_2.component.ts

// Assuming that a task is a string
public tasksToUnassign: string[];

// Setup a local reference to the service property inside your constructor
constructor(private formService:FormService){
  this.tasksToUnassign = this.formService.selectedTasksToUnassign;
}

component_2.component.html

<ul>
  <!-- Use *ngFor to loop through each item of an array -->
  <li *ngFor="let task of tasksToUnassign">{{ task }}</li>
</ul>

如何在两个不同的组件之间共享数据？

How to share data between two different components?

angular

sharedservices

共享服务

更新组件 1 内的行为主题

订阅行为主体的价值