Подстановка переменных в связке Angular7

Question

Как заменить переменную при связывании в angular7 Предположим, у меня есть строка «WelCome для моего сайта». При связывании должна отображаться WelCome Mike для моего сайта

Answer 1

если кроме имени текст остается таким же и связывать в html, то предпочтительным способом в html: -

<div>
Welcome {{_userName}} to my Site!
</div>

Answer 2

В HTML-файле вы можете написать следующее:

<div>
<h1>
WelCome {{username}} to my site!
</h1>
</div>

и если вы используете файл ts (TypeScript), вы можете инициализировать имя пользователя там.

export class AppComponent {
  username= 'Mike';
}

надеюсь, это вам поможет.

Answer 3

Вам следует использовать переменную в своем HTML-шаблоне, например {{welcomeMsg}}, и построить эту строку в компоненте .ts (если вы используете машинопись).

welcomeMsg = "Welcome to my site"; // default value

И когда приложение узнает usernmae или все, что вам нужно, просто измените это значение по своему желанию:

...
welcomeMsg = "Welcome " + username + " to my Site.";
...

Шаблон HTML будет обновлен с новым значением.

Или вторая возможность - использовать более гибкую переменную, такую ​​как:

<div>
Welcome {{usename}} to my Site!
</div>

Когда переменная username будет заполнена некоторым значением, она будет автоматически добавлена ​​в приветственное сообщение.