Question

所以我的范围是在开发模式下我在页面上显示翻译字符串（例如橙色）..

所以，我们有一个翻译管道

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationService } from 'app/services/translation.service';
const getByKey = require('lodash.get');

    @Pipe({
      name: 'translate'
    })
    export class TranslatePipe implements PipeTransform {

      constructor(public _translation: TranslationService) {}

      transform(value: string, args?: string): any {
        console.log('KEY: ', value, 'ENGLISH', args);
        return getByKey(this._translation.store, value) || args;
      }
    }

我们在我们的视图中使用它，如

{{ 'global.key' | translate 'Translated text' }}

效果很好......

现在，我们想要刷新那些用管道翻译的......所以它们在页面上可见......让我们的翻译页面更好地概述发生了什么（已经翻译了什么）什么仍然缺失）

现在，如果我们要使用的话

这很简单，就像这样

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationService } from 'app/services/translation.service';
import { DomSanitizer } from '@angular/platform-browser';
const getByKey = require('lodash.get');

@Pipe({
  name: 'translate'
})
export class TranslatePipe implements PipeTransform {

  constructor(public _translation: TranslationService, private _sanitizer: DomSanitizer) {}

  transform(value: string, args?: string): any {
    console.log('KEY: ', value, 'ENGLISH', args);
    return this._sanitizer.bypassSecurityTrustHtml('<span class="translated">' + (getByKey(this._translation.store, value) || args) + '</span>');
  }
}

但我们不是......我们没有使用innerHTML ....并且跨站点实现它会使安静的任务变得安静......

那么还有其他方法可以将html / css包装器放到我们的管道翻译文本中吗？

欢迎任何想法

Answer 1

我想，如果不使用[innerHTML]或[outerHTML]，就无法用html包装它。管道旨在转换数据，但不是真正改变DOM。

我认为可以使用组件而不是管道，您可以使用@Input轻松解决此问题。

但我想最简单的解决方案是使用[outerHTML]，因为它会被Angular自动清理。只要翻译服务没有返回任何意外情况，一切都应该有效（否则你会收到错误）：

为了系统地阻止XSS错误，Angular默认将所有值视为不受信任。当一个值从模板，通过属性，属性，样式，类绑定或插值插入DOM时，Angular会清理并转义不受信任的值。（https://angular.io/guide/security）

更改视图（注意，translate之后必须有:

<div [outerHTML]="'global.key' | translate: 'Translated text'"></div>

更改transform - 功能，如下所示：

transform(value: string, args?: string): any {
   console.log('KEY: ', value, 'ENGLISH', args);
   const translation = getByKey(this._translation.store, value);
   return translation ? `<span class="translated">${translation}</a>` : args;
}

Angular：翻译管道 - 视觉助手

1 个答案: