angular - 通过服务在相同或其他组件中进行更改后立即更新组件中的属性

Question

我是 Angular 的新手，我正在做一个简单的项目，一个音乐播放器。

我在service.ts中有一个数组中的歌曲，通过该组件喜欢的歌曲将所有歌曲显示给用户，这两个组件是home-component的子组件，它接收要播放的歌曲并具有播放暂停按钮等.

我担心的是，我在主组件的播放器上有一个赞按钮（靠近播放暂停按钮），当单击该歌曲的赞按钮时，该歌曲的“赞”设置为 true，并且该歌曲的赞按钮变为红色。并且歌曲通过歌曲的喜欢属性过滤显示在喜欢的歌曲组件上。

但是我遇到的问题是，单击“赞”按钮后，歌曲并没有立即添加到列表中，也没有变红。这些仅在我单击并从另一个组件返回或单击另一首歌曲然后返回到喜欢的歌曲后才会发生（然后它才开始显示红色的喜欢按钮）

反正有没有实时更新这些列表。我认为它可以使用observables来完成，但我不知道如何应用它。

以下是供参考的代码。

服务.ts

  getSongs() {
    return this.songs
  }


  songs: Song[] = [{
    url: "./assets/song1.mp3",
    name: "Song1",
    singer: "Song1 singer",
    img: "./assets/song1.jpg",
    liked: false,
    inplaylist: false
  }]

likeclicked(songurl: string) {
    var song_liked = this.songs.filter(element => element.url == songurl)[0]
    song_liked.liked = !song_liked.liked
  }

喜欢的组件.ts

ngOnInit(): void {
    this.likedsongs=this._allsongs.getSongs().filter(element=>element.liked==true);
  }

家庭组件

liked(songurl: string) {
    this._allsongs.likeclicked(songurl)
  }

所有功能都工作正常（歌曲喜欢从 false 更改为 true，反之亦然，当单击 like 按钮时）但它不会实时更新数组。任何建议都会非常有帮助。

标签： angular