什么是AngularJS中的插值

在这篇文章中，我们将了解AngularJS中的插值，同时了解基本的实现。在AngularJS中，插值是一种将数据从TypeScript代码转移到HTML模板（视图）的方式，也就是说，它是一种方法，我们可以将表达式放在一些文本之间，并获得该表达式的值。插值基本上是将文本与表达式的值结合起来。插值是一种单向的数据绑定。通过它，我们可以从我们的逻辑中绑定一些数据值。为了使用插值，我们需要将我们的表达式放入双大括号{{ }}中。通过插值，只有字符串数据/表达式会被评估，也就是说，只有字符串参数会被用于插值。

语法:

{{ expression }}

插值的工作：在编译过程中，$interpolate服务被编译器利用，以显示文本和属性是否有插值标记，以及嵌入式表达式。在这种情况下，一个interpolateDirective将被编译器添加到文本节点中，并在计算的插值函数上注册手表，为此，相应的文本节点或属性值将被更新，这是正常摘要循环的一部分。

我们可以将不同的参数，即布尔值、算术运算、数值等，以表达式的形式传入双大括号{{ }}中，这将转化为字符串数据。

例子：这个例子描述了AngularJS中插值的基本用法。

<div>{{3+2}}</div>
<div>{{title}}</div>
<div>{{value}}</div>
<div>{{bool}}</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title: string = "GeeksforGeeks";
  value: number = 0;
  bool: boolean = true;
}

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
  
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

什么是AngularJS中的插值？