Angular - 我正在使用 YouTube 播放器 API我想要重新加载页面的刷新组件

问题描述

我创建了一个关于我的工作的简单应用程序，我正在使用 YouTube 播放器 API 来播放/嵌入我的工作视频。我只想在每次访问我的投资组合页面时播放随机视频而无需重新加载。而且我还想使用 API 提供的播放/暂停事件，比如如果视频正在播放，我想在下面给出一些带有 <p> 标签的提示。我正在使用 Ionic，每次访问我的页面时，我都使用 ionViewWillEnter() {} 生命周期播放随机视频。

这是我的代码。

portfolio-page.html

<div>
<iframe [src]="randomURL" id="video"></iframe>
<p>{{ tips }}</p>
</div>

portfolio-page.ts

ionViewDidEnter() {
this.tips = "Some tips here"
this.randomURL = "https://www.youtube.com/embed/"my random video URL";

// Play Pause events
window['onYouTubeIframeAPIReady'] = (e) => {
this.YT = window['YT'];
this.player = new window['YT'].Player('player',{
videoId: id,
events: {
'onStateChange': (event) => {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.tip = "Some tips here"
break;

但这里的问题是当我第一次访问该页面时，播放暂停事件工作正常。如果再次访问该页面，则播放暂停事件不起作用。我想要做的就是只刷新组件页面（即 HTML 页面）而无需重新加载。

解决方法

您可以使用：

1. 在加载之前生成 randomURL 并填充组件的解析器。

   app-routing.ts

    RouterModule.forRoot([
        {
           path: '/portfolio',component: PortfolioPageComponent,resolve: { randomURL: PortfolioResolver }
          }
        ])
    ])
   

portfolio-resolver.ts

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';

export class PortfolioResolver implements Resolve<any> {
  constructor() {}

  resolve(): Observable<any> {
    //generate randomURL
    return randomURL
  }
}

portfolio-page.ts

import { Component,OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class PortfolioPageComponent implements OnInit {
  data: any;
  randomUrl: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
    this.randomUrl = this.data.randomURL;
    // do what you need with new random url
  }
}

2. 只需将一些变量作为标志从父组件传递到子组件（或通过 this.router.navigate(['/portfolio',{ reload: true }]); 从另一个地方）并接收类似 this.route.snapshot.paramMap.get('reload'); 以通知何时必须重新加载。