Основная проблема связана с тем, что я пытаюсь, чтобы один компонент взаимодействовал с другим. У меня есть список песен, и идея заключается в том, что при нажатии на одну песню она вызывает функцию в компоненте «теперь воспроизводится панель».
Простое нажатие кнопки воспроизведения / паузы вызывает функцию playPause, и это прекрасно работает. Проблема возникает из-за того, что вы щелкаете песню в компоненте «список воспроизведения», и она вызывает функцию playSong в компоненте «теперь воспроизводится панель». Кажется, что сама функция работает нормально, песня начинает играть, и значения данных, кажется, назначены. Однако возникают две ошибки.
Ошибка 1:
HTML не обновляется, чтобы показать новый заголовок и исполнителя.
Ошибка 2:
При нажатии кнопки воспроизведения / паузы для приостановки воспроизведения песни из компонента «список воспроизведения», функция playPause правильно выводит this со всеми правильными полями данных, но выводит undefined для this.playing
Сокращенный код для удобства чтения
теперь игра-bar.component.html
<div class="song">{{currentSong.title}}</div>
<div class="artist">{{currentSong.artist}}</div>
теперь игра-bar.component.ts
export class NowPlayingBarComponent implements OnInit {
isActive: boolean;
progress: number = 10;
playing: boolean;
currentSong: Song = {
"id": null,
"title": "",
"artist": "",
"length": "",
"fileName": ""
};
song: any;
songs: Song[] = [];
constructor(private songService : SongsService) { }
ngOnInit() {
this.songService.fetchData()
.subscribe(d => this.songs = d as Song[]);
}
playPause() {
console.log('Play Pause this:');
console.log(this);
console.log(this.playing);
if (this.playing) {
console.log('Its playing');
this.playing = false;
this.song.pause();
}
else {
if (!this.song) {
this.song = new Howl({
src: ['assets/music/' + this.songs[0].fileName]
});
}
this.currentSong = this.songs[0];
this.playing = true;
this.song.play();
}
}
playSong(id: number) {
let that = this;
this.songService.fetchData()
.subscribe(function(d) {
if (that.playing) {
that.song.stop();
that.song.unload();
}
that.song = new Howl({
src: ['assets/music/' + d[id].fileName]
});
console.log(that.song)
console.log(that)
that.currentSong = d[id];
that.playing = true;
that.song.play();
});
}
}
playlist.component.ts
import { Component, OnInit } from '@angular/core';
import Song from "../models/Song"
import { SongsService } from "../songs.service";
import { NowPlayingBarComponent } from "../now-playing-bar/now-playing-bar.component"
export class PlaylistComponent implements OnInit {
songs: Song[] = [];
constructor(private songService : SongsService, private NP : NowPlayingBarComponent) { }
ngOnInit() {
this.songService.fetchData()
.subscribe(d => this.songs = d as Song[]);
}
songClicked(id) {
this.NP.playSong(id)
}
}
Я рад загрузить полный код, если это поможет, просто не хотел превращать его в беспорядочный беспорядок. Я потратил часы, пытаясь понять это, но я просто не могу этого понять. Мое лучшее предположение, что компонент «плейлист» взаимодействует с «теперь играющей панелью», неверен.