如何使用Angular 10中另一个组件的点击事件更改iframe src

Question

我想在您单击菜单栏时更改 iframe src。我的菜单栏位于另一个组件中，您可以在该组件上的下拉菜单中更改语言。我想根据点击的语言更改 iframe src。

这是我的 HTML 菜单，其中包含一个名为“updateSrc()”的函数：

<nav>

<div class="select-box">
                      <div class="select-box__current" tabindex="1">
                        <div class="select-box__value" (click)="updateSrc(first_url)">
                          <input class="select-box__input" type="radio" id="0" value="1" name="Ben" checked="checked"/>
                          <p class="select-box__input-text">Es</p>
                        </div>
                        <div class="select-box__value" (click)="updateSrc(second_url)">
                          <input class="select-box__input" type="radio" id="1" value="2" name="Ben"/>
                          <p class="select-box__input-text">En</p>
                        </div>
                        <div class="select-box__value">
                          <input class="select-box__input" type="radio" id="2" value="3" name="Ben"/>
                          <p class="select-box__input-text">It</p>
                        </div>
                        <img class="select-box__icon" src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true"/>
                      </div>

                      <ul class="select-box__list">
                        <li>
                          <label class="select-box__option" for="0" aria-hidden="aria-hidden">Es</label>
                        </li>
                        <li>
                          <label class="select-box__option" for="1" aria-hidden="aria-hidden">En</label>
                        </li>
                        <li>
                          <a href="https://esourcecapital.it/">
                          <label class="select-box__option" aria-hidden="aria-hidden">It</label>
                          </a>
                        </li>
                      </ul>
                    </div> 

</nav>

这是我的 TS 文件：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
    this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }


}

正如我之前所说，我要更改的 iframe 在另一个组件中：

<div class="center">
                            <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="current_url" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--                            <div class="pairs">
                                <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
                                <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
                            </div> -->
                        </div>

如果所有内容都在同一个组件中，它会起作用，但菜单在一个组件中，而 iframe 标记在另一个组件中。

Answer 1

您可以使用subject 在组件之间共享数据。 您需要一项服务：

Iframe 服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IFrameService {

  private srcSubject = new Subject<string>();

  srcObservable$: Observable<string> = this.srcSubject.asObservable();

  constructor() { 
  }

  changeSrc(incomingSrc) {
    this.srcSubject.next(incomingSrc);
  }
}

然后您将在两个组件中注入服务：菜单和 iframe 组件

菜单 TS 文件

在头组件文件中，您将更改您的 changeSrc 方法，该方法将调用 iFrame 服务的 next 方法，该方法将为您创建的主题发出新值。

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer,
              private iframeService: IFrameService)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
      this.iframeService.changeSrc(this.sanitizer.bypassSecurityTrustResourceUrl(url);)
  }
}

IFrame 组件文件

在 iframe 组件文件中，您将像为头文件所做的那样创建服务的新实例，但您必须将其实例化为公共服务，这样您才能在模板中使用该服务。在您的 HTML 中，您将使用 async pipe 订阅 observable。

<div class="center">
  <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="iframeService.srcObservable | async" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--<div class="pairs">
      <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
      <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
  </div> -->
</div>

如果您对如何使用主题和可观察模式仍有疑问，请查看this video。