面试题：Angular中插值表达式在模板中的常见应用场景

Question

请举例说明Angular插值表达式与Angular模板结合时，至少三种常见的应用场景，并给出相应的代码示例。

Answer 1

1. 显示数据
   • 场景描述：在模板中显示组件类中的数据。
   • 代码示例：

     <div>
       <p>{{ message }}</p>
     </div>
     

     import { Component } from '@angular/core';
     @Component({
       selector: 'app - example',
       templateUrl: './example.component.html',
       styleUrls: ['./example.component.css']
     })
     export class ExampleComponent {
       message = 'Hello, Angular!';
     }
     

2. 调用组件方法
   • 场景描述：在模板中调用组件类中的方法，并显示方法的返回值。
   • 代码示例：

     <div>
       <p>{{ getFormattedDate() }}</p>
     </div>
     

     import { Component } from '@angular/core';
     @Component({
       selector: 'app - example',
       templateUrl: './example.component.html',
       styleUrls: ['./example.component.css']
     })
     export class ExampleComponent {
       getFormattedDate() {
         return new Date().toLocaleDateString();
       }
     }
     

3. 数学运算
   • 场景描述：在模板中进行简单的数学运算并显示结果。
   • 代码示例：

     <div>
       <p>The result of 5 + 3 is: {{ 5 + 3 }}</p>
     </div>
     

4. 字符串拼接
   • 场景描述：在模板中拼接字符串。
   • 代码示例：

     <div>
       <p>{{ 'Welcome, ' + username }}</p>
     </div>
     

     import { Component } from '@angular/core';
     @Component({
       selector: 'app - example',
       templateUrl: './example.component.html',
       styleUrls: ['./example.component.css']
     })
     export class ExampleComponent {
       username = 'John';
     }