用Angular / TypeScript编写String-Helper

Question

我的问题是HTML中的德语ü，ä，ö显示为未知符号。 您可以将ü写为“＆uuml”。 ä为“＆auml;”等等。 但是，不可能将ü替换为“＆uuml;”在打字稿方法中。结果将为“＆uuml;”。

这是我在打字稿中的方法，将ü替换为“＆uuml;”

public stringHelper(textUml: string): string {
    textUml = textUml.replace("ü", "ü");
    debugger;
    return textUml;
}

<button class="btn btn-success" (click)="addKeySkill()">{{stringHelper("Hinzufügen")}}</button>

与其显示“Hinzufügen”，而不是显示“ Hinzuf＆uuml; gen”。

Answer 1

改为使用Regex并应用g，以便所有出现的内容都将被替换（否则，仅替换第一个“ü”）：

textUml = textUml.replace('/ü/g', "ü");

Answer 2

那是因为当您在HTML模板中使用{{ }}时，Angular会转义字符串。因此，这是您的&被转义，而不被视为HTML实体的预期行为。

因此，您应该使其保持不转义（使用ü），并且应该可以正常工作。

如果您仍然想放置确切的HTML代码，并且不转义变量的内容，则需要define a custom pipe，然后使用innerHTML来输出代码。

在您的示例中，定义管道后，您将放置：

<button class="btn btn-success" (click)="addKeySkill()">
  <span [innerHTML]="stringHelper('Hinzufügen') | keepHtml"></span>
</button>