Angular 2-Trigger-Interpolation in einem Iframe

Ich möchte den Inhalt einer Templates-Webseite in einem Iframe anzeigen. Nach dem Laden des Inhalts wird die Vorlage jedoch nicht interpoliert. Liegt es am Change Detection System? Könnte es auf andere Weise erreicht werden?Angular 2-Trigger-Interpolation in einem Iframe

@Component({ 
    selector: 'my-app', 
    template : `<iframe [src]="template" width="100%" height="300px"></iframe>` 
}) 
export class App { 
    template: string = ` 
    <!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <title>Page title</title> 

     </head> 
     <body> 
     <p>{{strings[0]}}</p> 
     <p>{{strings[1]}}</p> 
     <p>{{strings[2]}}</p> 
     </body> 
    </html> 
    `; 
    strings: string[] = ['first element', 'second element', 'third element']; 
    constructor(){ 
    this.template = 'data:text/html;charset=utf-8,' + encodeURI(this.template); 
    } 
} 

bootstrap(App)

http://plnkr.co/edit/mWrqv1?p=preview

Es scheint nicht, entweder mit innerHtml Bindung zu arbeiten:

@Component({ 
    selector: 'my-app', 
    template : `<div [innerHtml]="template"></div>` 
}) 
export class App { 
    template: string = ` 
    <!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <title>Page title</title> 

     </head> 
     <body> 
     <p>{{strings[0]}}</p> 
     <p>{{strings[1]}}</p> 
     <p>{{strings[2]}}</p> 
     </body> 
    </html> 
    `; 
    strings: string[] = ['first element', 'second element', 'third element']; 

} 

bootstrap(App)

http://plnkr.co/edit/wscpSR?p=preview

Quelle

2016-05-31 dinigo

sollten Sie verwenden [srcdoc]

template: `<iframe id="{{patternId}}" [srcdoc]="srcdoc" > </iframe>`,

den Inhalt yo passieren Sie sollten den DomSanitizationService verwenden, um Skript, Formelemet übergeben zu können.

constructor(private sanitizer: DomSanitizationService) {} 

ngOnInit():any { 
this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(this.data.patternSource); 
}

siehe https://angular.io/docs/ts/latest/guide/security.html#!#xss

Quelle

2016-08-09 13:40:07 javadev28hu

[src]="template" und [innerHtml]="template" allgemein jede Interpolation oder Komponente oder Richtlinie nicht auslösen Instanziierung. Das von Ihnen beschriebene Verhalten wird daher erwartet und wie vorgesehen.

Interpation wird nur von HTML und Bindungen ausgelöst, die direkt zur Vorlage hinzugefügt werden.

Sie eine andere Winkel Anwendung innerhalb des laden und verwenden postMessage Daten zwischen dem Haupt Anwendung zu übergeben und die

Wenn es nur für die einmalige Interpolation ist, können Sie Maschinenschriften String Interpolation wie

verwenden

export class App { 
    template: string = ` 
    <!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <title>Page title</title> 

     </head> 
     <body> 
     <p>${strings[0]}</p> 
     <p>${strings[1]}</p> 
     <p>${strings[2]}</p> 
     </body> 
    </html> 
    `; 
    strings: string[] = ['first element', 'second element', 'third element']; 
    constructor(){ 
    this.template = 'data:text/html;charset=utf-8,' + encodeURI(this.template); 
    } 
}

Quelle

2016-05-31 16:03:30

Angular 2-Trigger-Interpolation in einem Iframe

Antwort

Verwandte Themen