我正在尝试将一个组件中的选定项目列表共享给另一个组件。 我创建了一个服务来声明列表:
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);
}
事实上,我看到每次我检查表中的项目时,列表都会在 component_1.ts 中的 console.log 中更新,并且我看到值已添加,但在 console.log 中component_2.ts ,它只显示我选择的第一个值!!!
答案 0 :(得分:2)
这是因为服务使用的是常规值。如果您希望值在每次更改时更新。您需要使用 observables 来保存值。
然后在 component_2.ts 中,您将订阅该值
public selectedTasksToUnassignSubject = new Behaviour Subject<Array<Tasks>>([]);
这会将 selectedTasksToUnassignSubject
的值保留在行为主题中。任何想要读取其值的组件都可以订阅它。因此,每当行为主体更新时,所有订阅者都会更新。
service.selectedTasksToUnassignSubject.next(tasks);
service.selectedTasksToUnassignSubject.subscribe(data=>{
//Code To Run Whenever the value of task changes
})
我可以想象 rxjs
会变得非常混乱,尤其是当您刚开始使用 angular 时。但它们非常有用,一旦您了解它们的工作原理,您就会爱上它们。
答案 1 :(得分:1)
那是因为(我假设)您每次与任务列表交互时都会调用 checkTask()
。由于 checkTask()
包含 console.log
,因此您会在 component_1 中的每次交互中看到它。
但是,在 component_2 上,您在 console.log
上有一个 ngOnInit()
,它仅在加载组件时运行一次。这就是为什么您只能看到第一个 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>