我想在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
它似乎无法使用innerHtml绑定:
@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)
小智 8
你应该使用[srcdoc]
template: `<iframe id="{{patternId}}" [srcdoc]="srcdoc" > </iframe>`,
传递内容你应该使用DomSanitizationService来传递脚本,形成elemet.
constructor(private sanitizer: DomSanitizationService) {}
ngOnInit():any {
this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(this.data.patternSource);
}
请参阅 https://angular.io/docs/ts/latest/guide/security.html#!#xss