SafePipe로 위생을 시도하는 중에 오류가 발생했습니다.

Question

Angular 애플리케이션에 YouTube 동영상을 퍼가려고 할 때 약간의 딜레마가 있습니다.

Angers의 DomSanitizer 메서드 "bypassSecurityTrustResourceUrl()"을 사용해 보았는데 제대로 표시되었습니다. 그러나 DOM은 현재 재생중인 비디오를 분명히 멈출 수있는 새로 고침을 계속해서 업데이트하고 있습니다.

media.component.ts

import { Component, OnInit, Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 
import { DomSanitizer } from '@angular/platform-browser'; 

import { VideoService } from '../../../services/videos/video.service'; 

@Component({ 
    selector: 'app-media', 
    templateUrl: './media.component.html', 
    styleUrls: ['./media.component.css'] 
}) 

@Injectable() 
export class MediaComponent implements OnInit { 

    videos = []; 

    constructor(public af: AngularFire, 
       private videoService: VideoService, 
       private sanitizer: DomSanitizer) {} 


    getVideos() { 
    this.videoService.getVideos().subscribe((data) => { 
     this.videos = data; 
    }); 
    } 

    sanitizeVideo(index: number) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.videos[index].videoUrl); 
} 

    ngOnInit() { 
    this.getVideos(); 
    } 

media.component.html

---

<div class="container" *ngIf="videos"> 
    <h1 class="my-4">Videos 
    <small>More to come</small> 
    </h1> 
<br><br> 
    <div *ngFor="let video of videos; let i = index"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <a href="#"> 
      <iframe width="560" height="315" [src]= "sanitizeVideo(i)" frameborder="5" allowfullscreen></iframe> 
     </a> 
     </div> 
     <div class="col-md-5"> 
     <h3>{{ video.videoTitle }}</h3> 
     <p>{{ video.videoDescription }}</p> 
     </div> 
    </div> 
    <hr> 
    </div> 
</div> 

그래서 내가 피하기 위해 파이프를 사용에 대한 자세한 내용을 발견 : 그 코드를 참조하십시오 새로 고침 문제.

error_handler.js:60 Error: Uncaught (in promise): Error: Cannot match any 
routes. URL Segment: 'null' 
Error: Cannot match any routes. URL Segment: 'null' 

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 
import {DomSanitizer} from '@angular/platform-browser'; 

@Pipe({ 
    name: 'safe' 
}) 
export class SafePipe implements PipeTransform { 

    constructor(private sanitizer: DomSanitizer) {} 

    transform(url) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 

} 

media.component.html

<div class="container" *ngIf="videos"> 
    <h1 class="my-4">Videos 
    <small>More to come</small> 
    </h1> 
<br><br> 
    <div *ngFor="let video of videos"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <a href="#"> 
      <iframe width="560" height="315" [src]= "video.videoUrl | safe" frameborder="5" allowfullscreen></iframe> 
     </a> 
     </div> 
     <div class="col-md-5"> 
     <h3>{{ video.videoTitle }}</h3> 
     <p>{{ video.videoDescription }}</p> 
     </div> 
    </div> 
    <hr> 
    </div> 
</div> 

제대로 일정한 DOM을 유발하지 않고 삽입 YouTube 동영상을 디스플레이에 대한 조언 : 그러나 아래의 오류를 만듭니다 새롭게 하다?

Answer 1

뷰 바인딩에서 sanitizeVideo()을 호출하지 마십시오. 이 방법은 변경 감지가 실행될 때마다 호출됩니다. 코드에서 Calk하고 그 결과를 필드에 할당하고 대신 해당 필드에 바인드합니다.