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

Question

我正在 ionic 2 上编写一个移动应用程序。我的应用程序的一个页面是一个新闻线程，以一种 Facebook 方式显示一些消息、照片、视频......我的问题是，我无法显示视频.我已经看到了很多关于这个问题的答案，但它对我不起作用(它们可能是 ionic 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”标签，但它也不起作用。
在我的 TypeScript 代码中:

VideoList: Array<any>;

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

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

我很确定我的代码很好，因为它适用于其他类型的数据，但不适用于视频。我想我需要将这些视频列入白名单或“清理”这些视频，但我无法做到这一点。任何人都知道如何解决我的问题？

谢谢

Answer 1

所以，一段时间后我找到了解决方案。其实没那么难，只需要知道怎么做。
在 TypeScript 文件的开头，你需要导入一个“sanitizer”:

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

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

虽然您需要在构造函数中添加它:

constructor(private sanitizer: DomSanitizer)

然后在您的 .ts 文件中的某个位置:

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

当然你需要事先声明属性(property) videoUrl .然后，您只需调用 videoUrl在您的 html 中:

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

它有效!无论如何，感谢您的帮助。