Написать String-Helper в Angular / TypeScript

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

Это потому, что когда вы используете {{ }} в своем HTML-шаблоне, Angular экранирует строку. Таким образом, ожидается, что ваше & будет экранировано и не будет рассматриваться как объект HTML.

Таким образом, вы должны оставить его без экранирования (с ü), и он должен работать нормально.

Если вы все еще хотите поместить точный HTML-код и не экранировать содержимое переменной, вам нужно определить пользовательский канал , а затем использовать innerHTML для вывода кода.

В вашем примере, когда вы определите трубу, вы добавите:

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

Answer 2

Вместо этого используйте Regex и примените g, чтобы заменить все вхождения (в противном случае будет заменен только первый "ü"):

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