插值是指在模板中动态地使用指定的值,本章将基于标签中最基本的文本插值和 JavaScript 表达式来对三大框架进行比较。
Angular 插值
在 Angular 中,插值使用双大括号并作为分隔符。{
{}}
文本插值
为了说明插值的工作原理,下面的代码演示了一个包含变量的 HelloWorld 组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: `
<p>{
{ msg }}</p>
<div><img src="{
{ logoUrl }}" /></div>
`
})
export class HelloWorldComponent {
msg = 'Hello, World!';
logoUrl = './assets/logo.png';
}
使用插值在相应的组件模板中显示 msg
变量的值:
<p>{
{ msg }}</p>
使用插值在相应的组件模板中显示 img
属性的值:
<div><img src="{
{ logoUrl }}" /></div>
虽然我们可以使用插值的方式来动态设置标签属性值,不过在 Angular 中通常使用绑定的方式来为属性赋值,更详细的说