角2 - 如何嵌入YouTube視頻

Question

我得到這個代碼

<div *ngIf="topic.video"> 
     <div class="video-container"> 
      <iframe width="300" height="169" src="topic.video.url" style="border:0"></iframe> 
     </div> 
    </div> 

問題：角將輸出src="localhost://8001"代替src="https://www.youtube.com/embed/hr4BbdUiTUM"

出了什麼問題嗎？

更新2

這是岡特的答案後得到的。

import { Component, OnInit, Pipe, Sanitizer } from '@angular/core'; 
import { DataService } from '../../shared/data'; 

    @Component({ 
     template: ` 
      <div class="subheader">Feed</div> 
       <div *ngFor="let topic of topics; let index = index; trackBy: trackByFn"> 
        <div *ngIf="topic.type == 'discussion'"> 
         <div *ngIf="topic.video"> 
          <div class="video-container"> 
           <iframe src="{{sanitizer.bypassSecurityTrustResourceUrl(topic.video.url)}}" ></iframe> 
          </div> 
         </div> 
       </div> 
      </div> 
     ` 
    }) 
    export class CompanyComponent implements OnInit { 
     constructor(
      private sanitizer:Sanitizer, 
      private dataService: DataService 
     ) {} 

     ngOnInit() { 
      this.topics = this.dataService.topics; 
     } 
    } 

我仍然得到這個錯誤

company.ts?ac6a:121 Error: Uncaught (in promise): Error: Error in ./CompanyComponent class CompanyComponent - inline template:29:41 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) 
Error: unsafe value used in a resource URL context (see 

Answer 1

如果你想使用[]或{{}}（永遠都在同一時間得到您需要啓用綁定變量的URL，{{}}只有作品字符串，而不是物體或陣列）：

[src]="topic.video.url" 

或

src="{{topic.video.url}}" 

如果URL中使用DOM的消毒劑去除得到，你可以使用一個管道一樣顯示在In RC.1 some styles can't be added using binding syntax

import { Pipe, DomSanitizer } from '@angular/core'; 

@Pipe({name: 'safeResourceUrl'}) 
export class SafeResourceUrl { 
    constructor(private sanitizer:DomSanitizer){} 

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

[src]="topic.video.url | safeResourceUrl" 

你也可以申請

this.myUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.topic.video.url); 

和綁定代之以

[src]="myUrl" 

但管道更可重複使用。