배열의 각 요소에 대한 bypassTecureResourceUrl을 우회하는 방법은 무엇입니까?

Question

Google지도 소스 API URL 배열이 있습니다. 그러나 각 항목을 반복하고 iFrame의 소스에 바인딩 할 때.

다음을 사용할 수 있습니다.

constructor(private sanitizer: DomSanitizationService) { 
    this.url = sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com/maps/embed/v1/place?key=KEY&q=365 Badger Ave, Newark, New Jersey 07112'); 
} 

하지만 각 항목에 대해이 작업을 수행해야하며 업데이트 할 외부 소스에서 배열을 수신해야하므로 그렇게 할 수 없습니다.

각 URL에 대한 보안을 어떻게 무시할 수 있습니까? 아래 그림과 같이

여기 app.component.ts가

import { Component, Pipe } from '@angular/core'; 
import { DomSanitizationService } from '@angular/platform-browser'; 
@Pipe({name: 'secureUrl'}) 
export class Url { 

    constructor(private sanitizer:DomSanitizationService){ 
    this.sanitizer = sanitizer; 
    } 

    transform(url) { 
     return this.sanitizer.bypassSecurityTrustResourceUrl(url).changingThisBreaksApplicationSecurity;    
    } 
} 
@Component({ 
    selector: 'my-app', 
    pipes: [Url], 
    template: ` 
    <div class="container"> 
     <div style="padding-top: 20px"> 
     <div class="row" *ngFor="let row of rows"> 
      <div *ngFor="let event of row"> 
       <div class="col s12 m6 l4"> 
        <div class="card hoverable"> 
         <div class="card-image waves-effect waves-block waves-light"> 
         <img height="300" class="activator" [src]="event.thumbnail"> 
         </div> 
         <div class="card-content"> 
         <span class="card-title activator grey-text text-darken-4">{{event.title}}</span> 
         <p><a class="activator">Hosted by {{event.host.data.first_name}} {{event.host.data.last_name}}</a></p> 
         </div> 
         <div class="card-action grey lighten-2"> 
         <a class="blue-grey-text lighten-3">Details</a> 
         <a class="blue-grey-text lighten-3">Join</a> 
        </div> 
        <div class="card-reveal" style="font-size: 15px"> 
         <span class="card-title grey-text text-darken-4"><center>{{event.title}}</center><i class="material-icons right">close</i></span> 
         <hr> 
         <center> 
         <p class="truncate">{{event.description}}</p> 
         <hr> 
         <p>Starts {{event.start}}</p> 
         <iframe width="210" height="190" frameborder="0" style="border:0" src="{{event.address|secureUrl}}" allowfullscreen></iframe> 
         </center> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
` 
}) 
export class AppComponent { 
    public rows = GROUPS; 
} 
var EVENTS = [ 
    { 
    id: 95, 
    title: "Event Name", 
    description: "The awesome event description", 
    thumbnail: "https://ucarecdn.com/58955d6b-bd4c-41f3-8a7b-4ce2bf013b13/IMG_4229.JPG", 
    access: "public", 
    code: null, 
    start: "1 week ago", 
    end: "6 days ago", 
    address: "https://www.google.com/maps/embed/v1/place?key=KEY", 
    host: { 
     data: { 
     id: 23, 
     avatar: "http://www.gravatar.com/avatar/9e557072ab393aa2fca6701eb7b23853?s=45&d=mm" 
     } 
    }, 
    category: { 
     data: { 
     id: 1, 
     title: "Wedding", 
     description: "A marriage ceremony." 
     } 
    } 
    } 
]; 

var chunk_size = 3; 
const GROUPS = EVENTS.map(function(e,i){ 
    return i%chunk_size===0 ? EVENTS.slice(i,i+chunk_size) : null; 
}) 
.filter(x=>!!x) 

Answer 1

당신은 DomSanitizationService으로 PIPE를 사용할 수 있어요;

//our root app component 
import {Component, Pipe} from '@angular/core' 
import {DomSanitizationService} from '@angular/platform-browser'; 

@Pipe({name: 'secureUrl'}) 
export class Url { 

    constructor(private sanitizer:DomSanitizationService){ 
    this.sanitizer = sanitizer; 
    } 

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


@Component({ 
    selector: 'my-app', 
    pipes: [Url], 
    template: ` 
    <div *ngFor="let item of myUrls; let i = index"> 
     {{item.url|secureUrl}} 
    </div> 
    `, 
}) 
export class AppComponent { 
    myUrls=[{url:"google.com"},{url:"google1.com"},{url:"google2.com"}]; 
}