當您單擊選單欄時，我想更改 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 標記在另一個組件中。
uj5u.com熱心網友回復：
您可以使用主題在組件之間共享資料。您需要一項服務：
框架服務
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 中，您將使用異步管道訂閱 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 >
<button md-button (click)="updateSrc(first_url)" id="first" >Video en espa?ol</button>
<button md-button (click)="updateSrc(second_url)" id="second" >Video in english</button>
</div> -->
</div>
如果您仍然對如何使用主題和可觀察模式有疑問，請觀看此視頻。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/370077.html
標籤：javascript 有角的 打字稿 角10