Question

我需要从http获取Post[]，然后将其显示在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

在服务中创建“行为主题单例”变量，并将其设置为可观察值。然后，通过导入服务从任何组件订阅该可观察对象，创建一个实例并订阅该可观察对象。

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

Answer 2

userPosts的持久性将取决于注入的服务范围。

尝试向服务提供模块作用域或根作用域

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

或

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

避免在模块和组件中都将postservice作为提供者。

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

Answer 3

创建模型并将其创建为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;
    }
}

服务和两个组件之间的角度共享数据

3 个答案: