Angular Component 里 get 关键字修饰的属性的用法

在 Angular 中，get 关键字用于定义一个访问器属性（accessor property），它是一种特殊的属性，可以通过在类中定义一个带有 get 关键字的方法来实现。当访问这个属性时，会调用这个 get 方法，并返回该方法的返回值。这种方法使得访问属性时可以执行一些自定义操作，例如计算属性值、验证数据或触发其他操作。在 Angular 组件中，get 关键字通常与输入（@Input()）属性和输出（@Output()）属性结合使用，以实现更灵活的组件数据绑定。

下面我们将通过一个示例详细介绍在 Angular 组件中使用 get 关键字修饰的属性的用法。

假设我们正在开发一个在线商城应用，需要构建一个名为 ProductListComponent 的组件，用于展示产品列表。每个产品有一个名字、一个价格和一个库存量。我们希望建立一个可以根据库存量为每个产品设置不同背景色的功能。例如，库存量大于 10 时显示绿色背景，库存量在 5 到 10 之间时显示黄色背景，库存量小于 5 时显示红色背景。

首先，我们需要定义一个 Product 类来表示产品：

// product.ts
export class Product {
  constructor(
    public name: string,
    public price: number,
    public stock: number
  ) {}
}

接下来，我们创建一个名为 ProductListComponent 的组件，并在其模板中使用 ngFor 指令遍历产品列表，为每个产品创建一个列表项。为了实现根据库存量设置不同背景色的功能，我们可以使用 get 关键字定义一个访问器属性 stockBackgroundColor，并根据库存量返回相应的背景色。

// product-list.component.ts
import { Component } from '@angular/core';
import { Product } from './product';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products: Product[] = [
    new Product('Product 1', 49.99, 5),
    new Product('Product 2', 99.99, 12),
    new Product('Product 3', 29.99, 3),
  ];

  get stockBackgroundColor(): string {
    if (this.stock > 10) {
      return 'green';
    } else if (this.stock > 5) {
      return 'yellow';
    } else {
      return 'red';
    }
  }
}

在 ProductListComponent 的模板中，我们需要为每个产品的列表项设置一个动态背景色，可以使用 Angular 的样式绑定语法将 stockBackgroundColor 属性绑定到 background-color 样式属性上。

<!-- product-list.component.html -->
<ul>
  <li *ngFor="let product of products"
      [style.backgroundColor]="stockBackgroundColor">
    {{ product.name }} - {{ product.price }} - {{ product.stock }}
  </li>
</ul>