Angular 角度2-迭代具有不安全值的iframe数组

我有一个需要交互的iframe数组。问题是，当我这样做时，我得到了错误

不安全值

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

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

---

在处理url、脚本、html和资源时，需要绕过安全性：

例如：

自定义管道：

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

@Pipe({ name: 'safeUrl' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

其他组成部分：

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safeUrl" width="560" height="315" allowfullscreen></iframe>
  `
})
export class AppComponent {
  testRequestId = 'uelHwf8o7_U';

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：`
`
})
导出类AppComponent{
testRequestId='uelHwf8o7_'；
}

演示：

你的情况：

<iframe [src]="topic.video.url | safeUrl" ></iframe>

---

文档：

处理url、脚本、html和资源时，需要绕过安全性：

例如：

自定义管道：

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

@Pipe({ name: 'safeUrl' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

其他组成部分：

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safeUrl" width="560" height="315" allowfullscreen></iframe>
  `
})
export class AppComponent {
  testRequestId = 'uelHwf8o7_U';

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：`
`
})
导出类AppComponent{
testRequestId='uelHwf8o7_'；
}

演示：

你的情况：

<iframe [src]="topic.video.url | safeUrl" ></iframe>

---

文档：

如果您感兴趣，请与我联系craigcosmo@gmail.comif如果您有兴趣，请与我联系craigcosmo@gmail.com