Question

我有一个带角度的5应用程序，其中有作业的滑动视图（认为很酷）。每个作业都有一个YouTube视频ID，该ID用于使用ngx-youtube-player播放视频。

滑动到第一个作业会显示第一个视频。但是滑动到第二个作业并不会更新视频，第一个仍然显示，即使console.log（）表明新的作业（占用）已正确地提供给我的角度组件（即“占用”变量保持）正确的值）

我的组件（occupation-card.component.ts）看起来像这样：

import { Component, OnInit, Input } from '@angular/core';
import { OccupationCalculated } from '../occupation-calculated';
import { YoutubePlayerModule } from 'ngx-youtube-player';

@Component({
    selector: 'custom-occupation-card',
    templateUrl: './occupation-card.component.html',
    styleUrls: ['./occupation-card.scss']
})
export class OccupationCardComponent implements OnInit {
    @Input() occupation: OccupationCalculated;
    player: YT.Player;

    constructor(
    ) { }

    ngOnInit(): void {
    }

    public onReady(player) {
        console.log('player instance', player);
    }

    public onStateChange(event, youtubeId) {
        console.log('player state', event.data);
        console.log('youtube id', youtubeId);
    }
}

然后我有一个html文件，可以在其中找到以下片段：

    <div *ngIf="occupation.youtubeId">
        <youtube-player
            [videoId]="occupation.youtubeId"
            (ready)="onReady($event)"
            (change)="onStateChange($event, occupation.youtubeId)">
        </youtube-player>
    </div>

问题：
可以[videoId]“监听” occupation.youtubeId变量吗？

P.S。我最近为此使用了iframe而不是ngx-youtube-player，但效果很好，但是它不允许我在视频加载完成后触发一个函数，例如ngx-youtube-player中的onReady函数做。所以这就是为什么我使用youtube-player的原因。可能会很有用。

更改模型对象后，ngx-youtube-player不会更新视频（角度5）

0 个答案: