Angular7绑定中的变量替换答案

【问题标题】：Variable Substitution In Angular7 BindingAngular7绑定中的变量替换
【发布时间】：2019-06-12 01:40:04
【问题描述】：

在angular7中绑定时如何替换变量假设我有字符串“欢迎来到我的网站” 绑定时应显示欢迎 Mike 访问我的网站

【问题讨论】：

【解决方案1】：

您应该在 html 模板中使用变量，例如 {{welcomeMsg}}，并在 .ts 组件中构建此字符串（如果您使用的是 typescript）。

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

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

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

Html 模板将更新为新值。

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

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

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

【讨论】：

我想让 name = "Mike";让多=hello my name is ${name} ；控制台.log（多）；我想在 html 中完成类似的事情，渲染时如何实现
所以，正如我所描述的：你有一个名字 = 'Mike'，消息 = '欢迎来到我的网站'。 Html 将是：{{message}} {{name}}
难道不可能像在 C# 中我们有 string.format() 函数来替换占位符值吗？
你可以在字符串函数上使用 replace()，更多你会在 google 上找到:)
但是为什么没有我们在 C# 中的格式化功能呢？因为如果我们要替换多个值，那么我们需要使用多次替换。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在 HTML 文件中可以这样写：

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

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

export class AppComponent {
  username= 'Mike';
}

希望这对你有帮助。

【讨论】：