Angular 8 中的字符串插值

17 Mar 2025 | 阅读 2 分钟

字符串插值是一种单向数据绑定技术，用于将数据从 TypeScript 代码输出到 HTML 模板（视图）。它使用双花括号中的模板表达式来显示从组件到视图的数据。字符串插值添加来自组件的属性的值。

例如

我们已经使用 Angular CLI 创建了一个 Angular 项目。

查看: 如何创建 Angular 8 项目。 点击这里

在这里，我们使用相同的项目作为示例。

打开 app.component.ts 文件，并使用以下代码：

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'Data binding example using String Interpolation';  
}  

现在，打开 app.component.html 文件，并使用以下代码查看字符串插值：

<h2>  
  {{ title }}  
</h2>   

现在，打开 Node.js 命令提示符，并运行 ng serve 命令查看结果。

输出

字符串插值也可以用于解析其他一些表达式。让我们看一个例子。

示例

使用以下代码更新 app.component.ts 文件

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'Data binding example using String Interpolation';  
    numberA: number = 10;  
    numberB: number = 20;  
  }  

app.component.html

输出

你可以用另一种方式使用相同的应用程序

App.component.ts

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'Data binding example using String Interpolation';  
  numberA: number = 10;  
  numberB: number = 20;  
  addTwoNumbers() {  
    return this.numberA + this.numberB;  
  }  
} 