Question

我有这个烟斗

import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform, SecurityContext } from '@angular/core';

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private dom: DomSanitizer) {}
    transform(value) {
        return this.dom.sanitize(SecurityContext.HTML, value);
    }
}

在我的html中，我这样做：

<mat-dialog-content>
    <div [innerHtml]="bodyContent | safeHtml"></div>
</mat-dialog-content>

在.ts文件中：

dialogRef.componentInstance.bodyContent = this.translateService.instant('dialog.upgrade_package_requested',
{
   context: `${this.translateService.instant('dialog.context')}`,
   name: `Yuhu`
});

我在翻译文件中的密钥：

"upgrade_package_requested": "<p> Yuhuu <b>{{context}}</b>.<br /> Name <b>{{name}}</b>.</p><button mat-flat-button>Test</button>",

结果是 enter image description here

因此，该按钮不是解释为按钮，而是解释为简单文本。你能帮我吗？提前谢谢。有什么想法吗？

Answer 1

使用sanitize的{{3}}方法代替DomSanitizer。由于button是不安全的部分，需要明确标记

例如：

transform(value) {
        return this.dom.bypassSecurityTrustHtml(value);
    }

选中bypassSecurityTrustHtml。

注意：致电bypassSecurityTrustHtml确实需要注意。根据Angular文档-

调用任何bypassSecurityTrust ... API会禁用Angular的对传入的值进行内置消毒。仔细检查并审核进入此调用的所有值和代码路径。确保任何用户数据针对此安全上下文进行了适当的转义。

检查更多StackBlitz snippet

翻译和理解翻译文件中的按钮

1 个答案: