面试题：Angular中插值表达式与属性绑定在应用场景上有何区别

Question

请详细阐述在Angular中，插值表达式通常适用于哪些场景来展示数据，属性绑定又适用于哪些场景，并且各举一个简单的代码示例说明。

Answer 1

插值表达式适用场景及示例

1. 适用场景：
   • 主要用于在模板中直接显示数据值，适用于简单文本内容的展示，比如显示变量的值、对象属性的值等。例如在页面上显示用户的名字、文章的标题等。
2. 代码示例：
   • 假设在组件的TypeScript文件中有一个变量name：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app - my - component',
     templateUrl: './my - component.html'
   })
   export class MyComponent {
     name = '张三';
   }
   

   • 在模板my - component.html中使用插值表达式显示name：

   <div>欢迎，{{name}}</div>
   

属性绑定适用场景及示例

1. 适用场景：
   • 用于设置HTML元素的属性值，当属性值需要动态变化时使用。比如设置图片的src属性、链接的href属性等，使其根据组件中的数据动态改变。
2. 代码示例：
   • 假设在组件的TypeScript文件中有一个变量imageUrl：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app - image - component',
     templateUrl: './image - component.html'
   })
   export class ImageComponent {
     imageUrl = 'https://example.com/image.jpg';
   }
   

   • 在模板image - component.html中使用属性绑定设置图片的src属性：

   <img [src]="imageUrl" alt="示例图片">