带有特殊字符/变音符号的 Angular 9 字符串插值答案

【问题标题】：Angular 9 String Interpolation with Special Characters / Umlauts带有特殊字符/变音符号的 Angular 9 字符串插值
【发布时间】：2020-08-07 10:21:25
【问题描述】：

您好，我正在为一家德国企业开发一个小型 web 应用程序，并面临无法正确呈现特殊字符的问题。

元字符集设置为 utf8，当在 html 本身中有 ü ä ö ß 时我没有遇到问题，但是在使用字符串插值时我遇到了问题。

这里是一个例子：<span>{{user.lastName}} Müller</span>：

MÃ¼ller Müller

我看到人们想出了一个解决方法来使用管道并将其呈现为 [innerHtml]，但我也在 <input> 和其他非 html 相关位置中使用它。

有没有很好的方法来正确渲染这些字符串？

【问题讨论】：

我没有遇到这个问题...您是否尝试过将 user.lastname 记录到控制台以查看它的外观？
哦，我明白了。记录时它也说 Müller 但在我的数据库中它是正确的。可能是我从 localStorage 重新命名它的原因吗？
我猜想在从数据库到你的角度的某个地方，编码是不同的或类似的东西......也许数据库将它存储在 ANSI 中。尝试记录每一步的值，看看它在哪里中断
谢谢。我想我已经发现了问题。我用 jwt 发送用户信息。我认为有效载荷的编码会导致问题。你知道如何解决这个问题吗？
我通过使用 npm 包 jwt_decode 而不是 atob + JSON.parse 解码 jwt 来修复它。现在可以了。

标签： angular angular2-template

【解决方案1】：

使用 NGX 翻译服务。 NGX-Translate 是 Angular 的国际化库。它让您可以为您的内容定义不同语言的翻译并在它们之间轻松切换。

请在下面的链接中找到更多信息 ngx-translate

Github link

import {TranslateService} from '@ngx-translate/core';

   @Component({
       selector: 'app-root',
       template: `
       <div>
        <span>{{name | translate }} Müller</span>
      </div>`,
     })
    export class AppComponent {
       name= 'MÃ¼ller'
       constructor(public translate: TranslateService) {
      }
     }

【讨论】：