Vệ sinh URL đang làm mới video YouTube được nhúng

Question

Tôi gặp sự cố với ứng dụng AngularJS 2 của mình (Tôi đang sử dụng phiên bản RC5 của AngularJS 2). Dường như một URL được khử trùng đang kích hoạt phát hiện thay đổi, sau đó cập nhật div bên dưới mặc dù không có bất kỳ thay đổi nào trong trạng thái thành phần của tôi.

Từ quan điểm của người dùng, điều này thể hiện chính nó là tải lại video trong khi đang phát.

Vì vậy, theo quan điểm thành phần của tôi, tôi có:

<div *ngIf="isVideo(item)"> 
    <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div> 

Việc thực hiện các chức năng trên trong các mã thành phần là:

getTrustedYouTubeUrl(linkedVideo:LinkedVideoModel) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(linkedVideo.video.url); 
}  

Trong debugger tôi thấy rằng div được làm mới khá thường xuyên, bởi một cái gì đó được kích hoạt trong khung công tác AngularJS 2.

Vấn đề này sẽ biến mất, nếu tôi thay thế các đoạn mã HTML trên với một URL mã hóa cứng:

<div *ngIf="isVideo(item)"> 
    <iframe src="<hardcoded youtube url here>" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div> 

Vì vậy, tôi nghi ngờ rằng sanitization URL đang gây ra nó.

Có ai có thể chỉ cho tôi đúng hướng không? Một ví dụ làm việc về các video YouTube được nhúng có URL của chúng được liên kết với thuộc tính trên thành phần có thể?

Answer 1

đặn nó ra.

Đối với bất kỳ ai quan tâm. Vấn đề là việc sử dụng các chức năng này trong html của tôi

[src]="getTrustedYouTubeUrl(item)" 

Các tác dụng phụ tải lại đã biến mất một lần tôi đã thay đổi mã để tính toán url an toàn khi dữ liệu được nạp trong dịch vụ của tôi và thay đổi iframe ràng buộc để

này

<iframe [src]="item.video.safeUrl" scrolling="no" frameborder="0" allowfullscreen></iframe>  

Lưu ý rằng tôi hiện đang ràng buộc với thuộc tính.

Answer 2

tôi sẽ cố gắng sử dụng nó với pure pipe

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

ống có thể trông giống như (RC.6-DomSanitizer trở nên thay vì DomSanitizationService):

@Pipe({ name: 'safe' }) 
export class SafePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 
    transform(url) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
} 

Và sử dụng nó như sau:

<iframe [src]="url | safe" frameborder="0" allowfullscreen></iframe> 

Plunker Example (thử nút để đẩy)

Answer 3

Bạn có thể giữ giải pháp ban đầu của bạn và chỉ sử dụng changeDetection: ChangeDetectionStrategy.OnPush

<div *ngIf="isVideo(item)"> 
    <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div> 

Answer 4

Kết hợp các câu trả lời trước để có được nó làm việc theo cách này:

thành phần.ts (chỉ những phần liên quan)

import { DomSanitizer } from '@angular/platform-browser'; 

constructor( 
    private sanitizer: DomSanitizer 
) { 
    this.sanitizer = sanitizer; 
} 

ngOnInit() { 
this.getTrustedUrl('http://someUrl'); 
} 

getTrustedUrl(url:any){ 
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
} 

template.html

<iframe  
    [src]='this.safeUrl'> 
</iframe>