Angular 8中的字符串插值

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

语法:

{{ component_property }}

步骤:

• 在app.component.ts文件中定义一个包含一些字符串值的属性。
• 在app.component.html文件中，通过调用双大括号{{property_name }}中的属性名称来绑定该属性的值。

示例 1:

• app.component.html

<h1>
  {{ title }}
</h1>

• app.component.ts

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

输出:

示例 2:

• app.component.html

<h1 [style.color] = "'green'" 
    [style.text-align] = "'center'" >
    {{ title }} : {{ about }}
</h1>

• app.component.ts

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  title = "GeeksforGeeks";
  about = "Computer Science Portal for Geeks";
}

输出: