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

Question

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

public selectedTasksToUnassign = [];

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

组件_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);
}

在这个组件中，我想得到列表：组件_2.ts

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

事实上，我看到每次我检查表中的项目时，列表都会在控制台中更新。登录component1.ts并看到添加了值，但在控制台中登录component_2.ts，它只显示第一个选定的值！！！

Answer 1

这是因为服务使用的是常规值。如果希望每次更改都更新值。您需要使用可观察性来保持该值。

然后在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.comcomponent.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>