我想在 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 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)
http://plnkr.co/edit/wscpSR?p=preview http://plnkr.co/edit/wscpSR?p=preview
