Угловой обмен данными между сервисом и двумя компонентами

Question

Мне нужно получить Post[] с http, а затем отобразить его на post-list компоненте.Я могу удалить некоторые элементы из шаблона post-list и редактировать некоторые элементы, перейдя на другой маршрут, где я использую компонент post-edit.Как я могу использовать один и тот же массив Post[] между ними, чтобы изменения мгновенно отображались в приложении?Я полагаю, мне нужно хранить Post[] в службе?Как правильно отредактировать / обновить его из компонента?здесь я пытаюсь сохранить массив Post[] внутри службы оператором tap() внутри службы

  getAllPosts(): Observable<Post[]> {
    return this.http.get<Post[]>("https://jsonplaceholder.typicode.com/posts");
  }

  getAllUsersPosts(userId: number): Observable<Post[]> {
    return this.getAllPosts().pipe(
      map((posts: Post[]) => posts.filter((p: Post) => p.userId === userId)),
      tap(posts => {
        //storing to service
        this.userPosts = posts;
      })
    );
  }

, чтобы поделиться обновленным Post[] после выполнения метода удаления. Я пытаюсь отправить сохраненный массив обратноабоненту, но это не помогает

  deletePost(id: number): Observable<any> {
    return this.http.delete(`https://jsonplaceholder.typicode.com/posts/${id}`).pipe(
      mapTo(res => {
        const index = this.userPosts.findIndex(p => p.id == id);
        // console.log(index);
        this.userPosts.splice(index, 1);
        return this.userPosts;
      })
    )
  }

как правильно добиться этого?

Answer 1

Создайте в сервисе переменную Singleton Behavior Subject и сделайте ее наблюдаемой.Затем подпишитесь на это наблюдаемое из любого компонента путем импорта службы, создайте экземпляр и подпишитесь на этот наблюдаемый синглтон.

private publisherVariable= new BehaviorSubject<string>('empty')
castVariable = this.publisherVariable.asObservable()
this.publisherVariable.next(DATA_YOU_WANT_TO_SEND)

Answer 2

Создайте модель и создайте ее как singleton, используйте этот singleton в вашем сервисе, чтобы та же ссылка передавалась и обновлялась. Просто для примера

export class PostsModel {
    private static instance: PostsModel;
    public prop1: type = '';
    public prop2: type ='';
    static getInstance() {
        if (!PostsModel.instance) {
            PostsModel.instance = new PostsModel();
        }
        return PostsModel.instance;
    }

    static destroyInstance() {
        delete PostsModel.instance;
    }
}

Answer 3

Постоянство userPosts будет зависеть от введенной области обслуживания.

Попробуйте предоставить службе область модуля или корневую область

@module({
  providers:[PostService]
})
export class PostModule{}

Или

@Injectable({
  provideIn:'root'
})
export class PostService{}

Избегайте размещения postservice в качестве поставщика как в модуле, так и в компоненте.

@Componenent({
  providers:[PostService]
})
export class PostComponent{}