清理 url 未在 iframe 中呈现

Question

我有一项服务 return 视频 url 的格式类似于 [url1,url2,...] 因为这些是不安全的 url 所以在循环中对它们进行消毒。

 import { Component, OnInit } from '@angular/core';
    import { HomeService } from '../home/home.service'
    import { BrowserModule, DomSanitizer } from '@angular/platform-browser'
    import { SafeResourceUrl } from '@angular/platform-browser/src/security/dom_sanitization_service';

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    videoCollection: string[] = [];
    videoCollectionSafe: SafeResourceUrl[];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {
        this.homseService.getVideos().subscribe((response) => this.videoCollection = response.json());

        for (var i = 0; i < this.videoCollection.length; i++) {
            this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(this.videoCollection[i]));
        }
    }

    ngOnInit() {

    }
}

在html我写

  <!--<li *ngFor="let obj of videoCollectionSafe"><iframe width="560" height="315" [src]="obj" frameborder="0" allowfullscreen></iframe></li>-->
 <li *ngFor="let obj of videoCollectionSafe">{{obj}}</li>

这两行都没有 working.it 在页面上什么都不显示。谁能帮我解决这个问题。

Answer 1

将您的代码移至 ngOnInit()。检查有关 Angular 生命周期的信息：https://angular.io/guide/lifecycle-hooks

export class HomeComponent implements OnInit {

videoCollection: string[] = [];
videoCollectionSafe: SafeResourceUrl[];

constructor(private homseService: HomeService, sanitizer: DomSanitizer) {   }

ngOnInit() {

    this.homseService.getVideos().subscribe((response) => 
    this.videoCollection = response.json());

    for (var i = 0; i < this.videoCollection.length; i++) {         this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(this.videoCollection[i]));
    }

}
}

Answer 2

lesimoes 部分正确，您应该使用生命周期挂钩而不是构造函数。

更大的问题是您尝试在收到列表之前对其进行迭代。可观察订阅是异步的，就像任何 AJAX 调用一样。因此，您必须在取回数据后对数据采取行动。简单地将代码行放在 AJAX 调用之后是行不通的。

为此你有两个选择。

在 onComplete handler 中这样做：

export class HomeComponent implements OnInit {

    videoCollection: string[] = [];
    videoCollectionSafe: SafeResourceUrl[] = [];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {}

    ngOnInit() {

        this.homseService.getVideos().subscribe(
            response => this.videoCollection = response,
            error => console.error(error),
            () => this.videoCollection.forEach(video => this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(video)))
        );
    }
}

或 onNext 处理程序中的更多 "functionally"，因为您根本不需要中间 videoCollection 成员，看来：

export class HomeComponent implements OnInit {

    videoCollectionSafe: SafeResourceUrl[] = [];

    constructor(private homseService: HomeService, sanitizer: DomSanitizer) {}

    ngOnInit() {
        this.homseService.getVideos().subscribe(
            videoCollection => videoCollection.forEach(video =>  this.videoCollectionSafe.push(sanitizer.bypassSecurityTrustResourceUrl(video)))
            error => console.error(error)
        );
    }
}

此外，您还没有说明您使用的 angular 是哪个版本，但如果是 4.3 之后的版本，则不需要转换 response.json() because HttpClient will do that for you。如果您运行的 Angular 版本太旧以至于您仍然使用旧的 Http 您应该认真考虑升级，因为昨天发布了 6.0.0。

清理 url 未在 iframe 中呈现

sanitize url is not rendering in iframe

angular

angular2-observables