Angular：翻译管道 - 视觉助手

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;
}