Youtube видео в Angular 4

Question

Я хочу вставить видео YouTube в свое приложение в угловых 4

здесь HTML:

    <div fxFlex id="visor-video">
        <iframe width="300" height="200"
          [src]="displayURL">
        </iframe>        
      </div>

Здесь компонент:

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

export class VideoUnitComponent implements OnChanges {


  displayURL;
  @Input() video: Video;


  constructor(public videoService: VideoService, private sanitizer: DomSanitizer) {
    this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

  }

  ngOnChanges() {
    this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

  }
  sanitizedDisplayUrl() {
    return this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');
  }

  public getSantizeUrl(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }

}

Но система говорит, что "SafeValue должна использовать [свойство] = связывание: https://www.youtube.com/embed/tgbNymZ7vqY (см. http://g.co/ng/security#xss)"

Answer 1

Вам нужно использовать bypassSecurityTrustResourceUrl вместо bypassSecurityTrustUrl

Используйте этот код -

this.displayURL = sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

Рабочий пример

Answer 2

Несколько вещей, связанных с общим угловым использованием: - Поставщики, загруженные в конструктор, не будут выполняться до тех пор, пока ngOnInit () не перехватится. Не пытайтесь использовать их в конструкторе. - Использование ngOnChanges () и sanitizedDisplayUrl () здесь избыточно и бесполезно.

Что касается вашего вопроса, я бы сделал проверку в шаблоне, например:

<div
    fxFlex
    id="visor-video"
    *ngIf=displayURL"
>
    <iframe
        width="300"
        height="200"
        [src]="displayURL"
    ></iframe>        
</div>

Таким образом вы предотвращаете переход программы в iframe с помощью displayURL = null. Это может быть причиной вашей проблемы.