我有一个 Angular Component Class，我称之为 A，里面有一个成员 model $: O b ser v ab l e < P ro d u c tS e a rc h P a g e > ，然后我新建了另一个 Cl a ss B ，用 B 去 e x t e n d s A ，在 B 的代码里，看到了 o v err i d e m o d e l$ : Observable = … 的用法。

在上面的代码中，A 是一个 Angular 组件类，该类有一个成员 model$，类型为 Observable<ProductSearchPage>。Observable 是 RxJS （一个用于处理异步操作和事件的库）中的一个关键概念，它表示一个可以产生多个值的概念。在 Angular 中，它常常用于处理异步操作，如 HTTP 请求。

接下来我们创建了一个新类 B，并让 B 继承自 A。在 TypeScript 中，一个类可以继承另一个类的属性和方法，这就是所谓的类继承。在本例子中，B 继承了 A 的所有属性和方法，包括 model$。

然后在类 B 中，我们看到了 override model$: Observable<ProductSearchPage> = ... 这样的代码。override 关键字是 TypeScript 4.3 版本以后才加入的一个新特性，它用于在子类中覆盖父类的属性或方法。在本文例子中，B 通过 override model$ 覆盖了 A 中的 model$ 属性。这意味着，当在类 B 的实例中访问 model$ 时，会访问到 B 类中定义的 model$，而不是 A 类中定义的 model$。

现在，我们来详细解释一下这些概念。

类继承：在面向对象编程中，类继承是一种能力，它允许我们基于现有类创建新类。新类会继承现有类的所有属性和方法，我们可以对新类进行修改和扩展。在 TypeScript 中，我们使用 extends 关键字来实现类继承。例如，如果我们有一个 Person 类，我们可以创建一个 Employee 类，让 Employee 继承 Person，这样 Employee 就会有 Person 的所有属性和方法。
属性覆写：在子类中，我们可以覆写父类的属性和方法。这意味着，我们可以在子类中提供一个与父类同名的新属性或方法，以替换父类的实现。在 TypeScript 4.3 及之后的版本中，我们可以使用 override 关键字来明确表示我们想要覆写一个属性或方法。如果我们尝试覆写一个不存在的属性或方法，TypeScript 会给出一个错误。
Observable：在 RxJS 中，Observable 是一个关键的概念。一个 Observable 可以发出多个值，这些值可以在任何时间点发出。我们可以订阅一个 Observable，然后当 Observable 发出值时，我们的订阅代码就会执行。在 Angular 中，Observable 常常用于处理异步操作，如 HTTP 请求。

在Angular中，通过继承来创建一个新的类是常见的做法，这种继承关系可以应用于Component类。当一个类B继承自类A时，类B可以覆盖（override）类A的成员，包括属性、方法和访问器等。在你提到的情况下，类B覆盖了类A的成员model$: Observable<ProductSearchPage>。

覆盖成员是指在派生类（子类）中重新定义和实现从基类（父类）继承的成员。这种覆盖允许在派生类中修改继承的成员的实现细节，以满足特定需求。

下面解释覆盖的用法和意义：

覆盖属性成员：
在类B中，通过override model$: Observable<ProductSearchPage> = ...的语法，我们重新定义并覆盖了类A的model$属性。在这种情况下，model$成员在类B中有了新的实现。

示例代码如下：

export class A {
    
    
  model$: Observable<ProductSearchPage>;
}

export class B extends A {
    
    
  override model$: Observable<ProductSearchPage> = new Observable<ProductSearchPage>();
}

在上述示例中，类B继承自类A，并且通过override关键字覆盖了model$属性。在这里，我们使用了新的Observable实例来重写基类的默认实现。

覆盖方法成员：
类似地，覆盖也适用于方法成员。在类B中，可以重新定义和实现类A中的方法，并通过override关键字标识覆盖。

示例代码如下：

export class A {
    
    
  method() {
    
    
    // 基类的实现
  }
}

export class B extends A {
    
    
  override method() {
    
    
    // 派生类B中的实现
  }
}

在上述示例中，类B继承自类A，并覆盖了基类的method()方法。通过在类B中重新实现该方法，我们可以根据需要修改其行为。

覆盖访问器成员：
类B还可以覆盖继承自类A的访问器成员（getter和setter）。通过重新定义和实现访问器，我们可以在派生类中自定义属性的访问和赋值行为。

示例代码如下：

export class A {
    
    
  private _value: string;

  get value(): string {
    
    
    return this._value;
  }

  set value(newValue: string) {
    
    
    this._value = newValue;
  }
}

export class B extends A {
    
    
  private _value: string;

  override get value(): string {
    
    
    return 'Override: ' + this._value;
  }

  override set value(newValue: string) {
    
    
    this._value = 'Modified: ' + newValue;
  }
}

在上述示例中，类B覆盖了类A的value访问器。通过添加额外的逻辑，我们修改了派生类中访问和设置属性值的行为。

总结

在Angular中，类的继承关系允许派生类（子类）覆盖基类（父类）的成员。覆盖的语法使用override关键字，可以应用于属性、方法和访问器等成员。通过覆盖，派生类可以修改继承成员的实现细节，以满足特定的需求。这种功能为我们提供了灵活性和扩展性，使得在派生类中可以根据需要自定义和调整继承的行为。

关于 Angular 应用里 Component 继承和 Override 的一个实际例子

总结

猜你喜欢