Angularjs 如何在ionic 2中插入视频列表？

我正在离子2上编写一个移动应用程序。我的应用程序的一个页面是一条新闻线索，以Facebook的方式，显示一些消息、照片、视频。。。我的问题是，我不能显示视频。我已经看到了很多关于这个问题的答案，但对我来说不起作用（它们可能是离子1的解决方案）

所以，我想展示一段Youtube视频。我用HTML编写以下代码：

<ion-item *ngFor="let Video of VideoList">
  <video src="http://www.youtube.com/embed/{{Video.Link}}" frameborder="0" width="560" height="300"></video>
</ion-item>

请注意，我也尝试过使用“iframe”标记，但它也不起作用。 在我的打字脚本代码中：

VideoList: Array<any>;

constructor(public navCtrl: NavController, public http:Http, public navParams: NavParams) {
  http.get(URL).toPromise().then((response) => {
    this.VideoList= response.json();
  });
}

VideoList：数组；
构造函数（公共navCtrl:NavController、公共http:http、公共navParams:navParams）{
http.get（URL.toPromise（）。然后（（响应）=>{
this.VideoList=response.json（）；
});
}

其中

URL

是我用来获取JSON数组的链接，包含要显示的视频列表（以及与我的问题无关的其他内容）。出于隐私原因，我不想在这里写真正的URL

我很确定我的代码是好的，因为它适用于其他类型的数据，只是不适用于视频。我想我需要将这些视频列入白名单或“消毒”，但我没有做到这一点。有人知道如何解决我的问题吗

---

谢谢

所以，过了一段时间我找到了答案。其实没那么难，只是需要知道怎么做。 在TypeScript文件的开头，您需要导入“消毒剂”：

请注意，您不需要在app.module.ts文件中将其声明为提供程序

尽管您需要将其添加到构造函数中：

constructor(private sanitizer: DomSanitizer)

然后在.ts文件中的某个地方：

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

当然，您需要事先声明属性

videoUrl

。然后，您只需在html中调用

videoUrl

：

<iframe width="560" height="315" [src]="videoUrl"></iframe>

---

而且它有效！无论如何，谢谢你们的帮助。

所以，过了一段时间，我找到了答案。其实没那么难，只是需要知道怎么做。 在TypeScript文件的开头，您需要导入“消毒剂”：

请注意，您不需要在app.module.ts文件中将其声明为提供程序

尽管您需要将其添加到构造函数中：

constructor(private sanitizer: DomSanitizer)

然后在.ts文件中的某个地方：

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

当然，您需要事先声明属性

videoUrl

。然后，您只需在html中调用

videoUrl

：

<iframe width="560" height="315" [src]="videoUrl"></iframe>

---

而且它有效！无论如何，谢谢你们的帮助。

你们能发布你们的错误日志吗？你们尝试过

[src]

吗？试着定义一个

baseUrl

，然后像这样更改

src={{{{baseUrl+Video.Link}

@Fernando Del Olmo是的，但没有成功：/@hrdkisback我从来没有收到任何错误。只是我的视频不会显示。我会很快尝试baseUrl的东西，并让你知道它是否有效：）无论如何，非常感谢大家的帮助！非常感谢。你能发布你的错误日志吗？你试过

[src]

？试着定义一个

baseUrl

，然后像这样更改

src={{{baseUrl+Video.Link}

@Fernando Del Olmo是的，但没有成功：/@hrdkisback我从来没有收到任何错误。只是我的视频不会显示。我会很快尝试baseUrl的东西，并让你知道它是否有效：）无论如何，非常感谢大家的帮助！非常感谢。