我如何将一个兄弟组件的功能共享给另一个兄弟组件

Question

在这里我知道如何从 json 中获取数据，但是我发现在基于引用另一个 json 的 id 从 json 中检索数据时很困难问题陈述在这里我有一个 api/users 的 json 包含 10 个用户和每个有 10 个博客还有一个用于 api/posts 的 api，其中包含所有帖子现在我必须检索数据，比如当我点击 user1 时，必须显示与 userid 1 相关的博客

这是 service.ts

getUsers(): Observable<UserModel[]> {
return this.http.get<UserModel[]>(`${this._url}/users`)}

getUserBlogPosts(userId:number){
return this.http.get<BlogsModel[]>(`${this._url}/posts?userId=${userId}`)}

user.ts

 ngOnInit() {
this.getUsersOnSubscribe()  }
getUsersOnSubscribe(){
this.service.getUsers().subscribe(
  data =>{
    console.log(data);
    this.users = data;
  } 
)}
 onClickUser(users){  
this.currentUser = users
let id = users.id
console.log(id)        
this.service.getUserBlogPosts(id).subscribe(
  data=>{
    console.log(data)
    this.currentUser = data
  })  }

.blog.ts

 ngOnInit() {
this.getBlogsList();  }

 getBlogsList() {
let id  = this.blog
this.service.getUserBlogPosts(id.userId).subscribe(
  data=>{
    console.log(data)
    this.blogs=data;
  }
)}

}

当我在控制台中单击 onclick(users) 时，我能够在用户组件中过滤数据，我希望此输出显示在博客组件中如何做到这一点，并且在获取 user1 的博客后也有问题单击它会重定向到 url/posts?userId=1，当我尝试将 url 编辑到 url/posts?userId=2 时，它没有显示任何数据。如何解决这个问题

Answer 1

在您的情况下，您可以重用您的服务并从 behaviorSubject 发出数据

服务.ts

constructor() {
   this._currentUser = new BehaviorSubject(null);
   this.currentUser$ = this._currentUser.asObservable();
}

setCurrentUser(user) {
   this._currentUser.next(user);
}

user.ts

this.service.getUserBlogPosts(id).subscribe(
  data=>{
    this.currentUser = data
    // Emits your value
    this.service.setCurrentUser(this.currentUser)
  } 
)

blog.ts

this.service.currentUser.subscribe(
    user => {
       //The data you emitted from user.ts is available here, do your logic
    }
)