如何在TypeScript上使用$scope.$watch

npm install --save @angular/core rxjs

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export function Watch<T>(propertyKey: string) {
  return function (target: any, key: string) {
    const subjectKey = `__${key}Subject`;
    const destroyKey = `__${key}Destroy`;

    Object.defineProperty(target, key, {
      get: function () {
        return this[propertyKey];
      },
      set: function (value: T) {
        if (!this[subjectKey]) {
          this[subjectKey] = new Subject<T>();
          this[destroyKey] = new Subject<void>();

          this[subjectKey]
            .pipe(takeUntil(this[destroyKey]))
            .subscribe((newValue: T) => {
              // 执行相应的操作
              console.log(`Property ${propertyKey} changed to ${newValue}`);
            });
        }

        this[propertyKey] = value;
        this[subjectKey].next(value);
      },
    });

    const ngOnDestroy = target.ngOnDestroy;
    target.ngOnDestroy = function () {
      if (ngOnDestroy) {
        ngOnDestroy.apply(this);
      }

      if (this[destroyKey]) {
        this[destroyKey].next();
        this[destroyKey].complete();
      }
    };
  };
}

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="name" />
  `,
})
export class ExampleComponent implements OnDestroy {
  @Watch<string>('name')
  name: string;

  ngOnDestroy() {
    // 执行清理操作
  }
}