Javascript 共享服务示例5

我知道这个问题已经被问过好几次了，但问题是，并没有人试图弄虚作假或显示代码的结果。这就是我所拥有的，我需要根据其他组件中的值更新其他组件中的值，但这不仅仅是值，我在其他组件中再次调用了函数。 我有一些组件去数据库并更新值，另一方面，我有另一个组件从服务中从数据库读取这些值。 这是我的代码示例

tasks.service.ts

我需要再次调用tasks-list.component.ts中的函数

---

有没有人知道我怎样才能做到这一点？最好的做法是使用主题

1在服务上存储任务列表并提供可订阅主题

private tasks: Array<Task>;
public $tasks: BehaviorSubject<Array<Task>>;

constructor(private http: HttpClient) {
  this.$tasks = new BehaviorSubject([]);
  ...
}

getAllTasks() {
 this.http.get(environment.apiUri + 'tasks')
    .subscribe(data => {
      this.tasks = data;
      this.$tasks.next(this.tasks);
    });
}

updateTask(params) {
  this.http.post(/* params */).subscribe((task) => {
    this.tasks = this.tasks.map(t => t.id !== task.id ? t : task);
    this.$tasks.next(this.tasks);
  });
}

createTask(...) {
  // again, do a request, update this.tasks and call $tasks.next
  ...
}

2在组件上订阅一个服务主题，而不是多个服务方法可观察侦听器，并在每次更改服务源时自动更新组件的列表

tasks: Array<Tasks>;

constructor(private tasksProvider: TasksProvider) {
  this.tasksProvider.$tasks.subscribe(tasks => this.tasks = tasks);
}

ngOnInit() { 
  this.tasksProvider.getAllTasks();
}

public updateCheckboxValue(id: number, name: string, event: any){
  this.tasksProvider.updateTask(id, name, event.checked);
}

---

这就是我所拥有的，我需要根据其他组件中的值更新其他组件中的值，但这不仅仅是值，我在其他组件中再次调用了函数。我有一些组件去数据库并更新值，另一方面，我有另一个组件从服务中从数据库读取这些值。-我就是想不通——你想解决的问题是什么？怎么做？在某个组件中更新数据库，然后在另一个组件中读取更新的值？我想您可以使用SerService-它们是单例的，所有组件都可以访问。您能回答我的问题吗？您必须实现发布/订阅模式，该模式可以使用主题或BehaviourSubject@MiomirDancevic看起来是一个常见的周期性依赖问题，无论如何，它与方法本身无关，我建议您发布新问题，包括您现在尝试运行的示例的所有适当代码基础结构。我发布了整个服务。ts@MiomirDancevic您发布了与新方法不对应的服务的初始版本。服务和组件应该重新设计，调试新的基础设施问题是一个单独的故事，与方法本身无关。它与重新设计无关，当我开始使用服务时，我已经遇到了这个错误

import {Component} from '@angular/core';

import { Tasks } from '../services/tasks';
import { TasksProvider } from '../services/tasks.service'; 

@Component({
  selector: 'app-tasks-list',
  templateUrl: './tasks-list.component.html',
  styleUrls: ['./tasks-list.component.scss']
})

export class TasksListComponent {
  tasks: Array<Tasks>;

  constructor(private tasksProvider: TasksProvider) { }

  ngOnInit() { 
    this.getTasksList();
  }

  displayedColumns: string[] = ['id', 'name', 'finished'];
  private getTasksList() {
        this.tasksProvider.getAllTasks()
            .subscribe(tasks => {
                this.tasks = tasks;
            });
  } 

  public updateCheckboxValue(id: number, name: string, event: any){
    this.tasksProvider.updateTask(id, name, event.checked).subscribe(
      result => {},
      () => {
        alert('Something went wrong');
      })
  }
}

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

import { Tasks } from '../services/tasks';
import { TasksProvider } from '../services/tasks.service'; 

export interface DialogData {
  name: string;
}

@Component({
  selector: 'app-tasks-add-new',
  templateUrl: './tasks-add-new.component.html',
  styleUrls: ['./tasks-add-new.component.scss']
})
export class TasksAddNewComponent implements OnInit {

  ngOnInit() {
  }

  constructor(public dialog: MatDialog, private tasksProvider: TasksProvider) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(TasksAddNewDialog, {
      width: '250px',
      data: {name: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.name = result
      this.tasksProvider.createNewTask(this.name).subscribe(
        result => {},
        () => {
          alert('Something went wrong');
        })
  }
}
}
@Component({
  selector: 'tasks-add-new-dialog',
  templateUrl: 'tasks-add-new-dialog.html'
})

export class TasksAddNewDialog {
  constructor(
    public dialogRef: MatDialogRef<TasksAddNewDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

 this.tasksProvider.createNewTask(this.name).subscribe(
        result => {},
        () => {
          alert('Something went wrong');
        })

  private getTasksList() {
        this.tasksProvider.getAllTasks()
            .subscribe(tasks => {
                this.tasks = tasks;
            });
  } 

private tasks: Array<Task>;
public $tasks: BehaviorSubject<Array<Task>>;

constructor(private http: HttpClient) {
  this.$tasks = new BehaviorSubject([]);
  ...
}

getAllTasks() {
 this.http.get(environment.apiUri + 'tasks')
    .subscribe(data => {
      this.tasks = data;
      this.$tasks.next(this.tasks);
    });
}

updateTask(params) {
  this.http.post(/* params */).subscribe((task) => {
    this.tasks = this.tasks.map(t => t.id !== task.id ? t : task);
    this.$tasks.next(this.tasks);
  });
}

createTask(...) {
  // again, do a request, update this.tasks and call $tasks.next
  ...
}

tasks: Array<Tasks>;

constructor(private tasksProvider: TasksProvider) {
  this.tasksProvider.$tasks.subscribe(tasks => this.tasks = tasks);
}

ngOnInit() { 
  this.tasksProvider.getAllTasks();
}

public updateCheckboxValue(id: number, name: string, event: any){
  this.tasksProvider.updateTask(id, name, event.checked);
}