0

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

这是我的代码。

投资组合page.html

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

投资组合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 页面）而不重新加载。

4

1 回答 1

0

您可以使用 ：

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

    应用程序路由.ts

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

投资组合解析器.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
  }
}

投资组合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
  }
}
  1. 只需将一些变量作为标志从父组件传递给子组件（或从另一个地方通过），并在必须重新加载它时this.router.navigate(['/portfolio', { reload: true }]);接收到通知。this.route.snapshot.paramMap.get('reload');
于 2021-05-10T09:55:54.853 回答