Angular7绑定中的变量替换

Question

在angular7中绑定时如何替换变量假设我有字符串"WelCome to my site“当绑定时它应该显示WelCome Mike到我的站点

Answer 1

您应该在html模板中使用变量，如{{welcomeMsg}}，并在.ts组件中构建此字符串(如果您正在使用typescript)。

​

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

​

当应用程序知道usernmae或您需要的任何内容时，只需根据需要更改此值：

​

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

​

Html模板将使用新值进行更新。

或者第二个机会是使用更灵活的变量，比如：

​

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

​

当username变量将填充一些值时，它将自动添加到欢迎消息中。

Answer 2

如果除了名称之外，文本保持不变并绑定在html中，那么在html中更好的方式是:-

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

Answer 3

在HTML文件中，你可以这样写：

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

如果你使用的是ts文件(TypeScript)，你可以在那里初始化用户名。

export class AppComponent {
  username= 'Mike';
}

希望这对你有帮助。