Angular 8中的字符串插值

Angular 8中的字符串插值是一种单向数据绑定 技术，该技术被用于从一个打字稿码的数据传送到一个HTML模板(图)。它在大括号中使用模板表达式来显示从组件到视图的数据。字符串插值将组件中的属性值添加到HTML模板视图中。

句法：

{{ component_property }}

方法：

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

范例1：

• app.component.html

  HTML

  
    {{ title }}
  

• app.component.ts

  Java脚本

  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

  的HTML

  
      {{ title }} : {{ about }}
  
  

• app.component.ts

  Java脚本

  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";
  }
  

输出：