我正在尝试在 Controller 中使用带有花括号的 HTML 模板。
我发现的问题是,当我将 innerHTML 与 safePipe 一起使用时,我看到的是花括号而不是结果。
home.html(模板)
<ul>
<li *ngFor="let item of events">
{{item.name}}
</li>
</ul>
sanitizing.ts
@Pipe({name: 'safe'})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default: throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
home.component.html
<div [innerHtml]="myTemplate | safe: 'html'"></div>
结果
{{item.name}}
期望的结果
dummy
最佳答案
innerHTML
不编译 Angular 模板。
如果您想动态插入组件,请参阅 angular docs dynamic component loader
loadComponent() {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(Type.component);
let componentRef = viewContainerRef.createComponent(componentFactory);
}
关于javascript - innerHtml +花括号的 Angular 5问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50149442/