使用Angular CLI处理从组件到组件的数据时遇到问题

Question

主要问题与我试图让一个组件与另一个组件交互的事实有关。我有一个歌曲列表，其想法是，当点击一首歌时，它会调用“now-playing-bar”组件中的一个功能。

只需点击播放/暂停按钮就可以调用playPause功能，效果很好。当你点击“播放列表”组件上的一首歌并且它在“now-playing-bar”组件中调用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)
    }
}

我很乐意上传完整的代码，如果这会有所帮助，只是不想让它变得杂乱无章。我花了几个小时研究试图解决这个问题，但我似乎无法得到它。我最好的猜测是“播放列表”组件与“现在播放栏”交互的方式不正确。

Answer 1

已经实施了一个工作示例@ https://stackblitz.com/edit/component-to-component。

它根据您的示例使用两个组件Playlist和NowPlayingNavbar。我还添加了模拟SongService模拟fetchData方法。

注意：避免从嵌套的子组件调用服务。

在UI开发中查看Presentation vs Container组件模式。