Angular Component 内 set 关键字的使用-526互联

"set" 关键字在Angular组件的TypeScript代码中通常用于创建和定义类的属性的setter方法。它是一种特殊的方法，负责设置类的私有成员变量的值。通过使用"set"关键字，我们可以在设置属性值时执行一些额外的逻辑，如输入验证、触发事件等。

让我们通过一个简单的例子来说明"set"关键字的用法。考虑一个Angular组件，其中有一个私有成员变量_name，我们希望在设置这个变量的同时，执行一些逻辑。这时就可以使用"set"关键字：

export class MyComponent {
  private _name: string;

  // 使用 set 关键字定义 setter 方法
  set name(value: string) {
    if (value && value.length > 0) {
      this._name = value;
      console.log(`Name set to: ${value}`);
    } else {
      console.error('Invalid name. Please provide a non-empty string.');
    }
  }

  // 其他组件代码...
}

在上面的例子中，我们定义了一个名为name的setter方法，它使用"set"关键字。当外部代码试图设置name属性时，实际上调用的是这个setter方法。在setter方法中，我们添加了一些逻辑来验证输入值是否合法，如果合法，则设置私有成员变量_name的值，并输出一条日志。如果输入值无效，则输出错误消息。

使用这样的setter方法有助于封装组件的内部逻辑，确保对属性的修改是受控的。这也是面向对象编程中封装的一个体现。

在Angular中，"set"关键字通常与属性绑定一起使用。例如，在组件的模板中，我们可以通过属性绑定将某个属性与组件类中的setter方法关联起来：

<!-- 组件模板 -->
<div>{{ myComponentName }}</div>

<!-- 组件类中的 TypeScript 代码 -->
export class MyComponent {
  private _name: string;

  // 使用 set 关键字定义 setter 方法
  set name(value: string) {
    if (value && value.length > 0) {
      this._name = value;
      console.log(`Name set to: ${value}`);
    } else {
      console.error('Invalid name. Please provide a non-empty string.');
    }
  }

  // 在组件的构造函数中创建组件属性
  constructor() {
    this.name = 'DefaultName'; // 这里会调用 setter 方法
  }

  // 在模板中绑定的属性，实际上是调用了 setter 方法
  get myComponentName(): string {
    return this._name;
  }

  // 其他组件代码...
}

在上面的例子中，模板中的myComponentName属性实际上调用了组件类中的name属性的setter方法，因为它们在getter方法中被绑定。这样，我们可以在设置属性时执行一些逻辑，而不仅仅是简单地赋值。

总的来说，"set"关键字是面向对象编程中用于创建setter方法的一种方式，它在Angular中的应用有助于更好地组织和封装组件的逻辑。通过setter方法，我们可以在属性被设置时执行额外的代码，以确保数据的有效性和安全性。

Spartacus 项目里也大量使用了 set 关键字：
type 是 CxInfo Component 经过 @Input 注解修饰后的私有属性，当其在父 Component 里被传递数据进来时，触发第 58 行的 set 关键字定义的 type 方法：

在这里插入图片描述