1. ホーム
  2. angular

[解決済み] Angular 4+ ngOnDestroy() サービス中 - observableを破壊する

2022-08-16 05:35:50

質問

angularアプリケーションでは ngOnDestroy() のライフサイクルフックがあり、このフックを使って observable の登録を解除します。

で作成された観測物を消去/破棄したいのですが、どうすればよいでしょうか? @injectable() サービス内に作成されたobservableを消去/破棄したいのです。 いくつかの書き込みを見たところ ngOnDestroy() はサービス内でも使えるという書き込みを見ました。

しかし、それは良い習慣で、そうする唯一の方法なのでしょうか? 誰か教えてください。

どのように解決するのですか?

オンデストロイ のライフサイクルフックはプロバイダで利用可能です。 ドキュメントによると

ディレクティブ、パイプ、サービスが破棄されるときに呼ばれるライフサイクルフックです。

ここでは の例です。 :

@Injectable()
class Service implements OnDestroy {
  ngOnDestroy() {
    console.log('Service destroy')
  }
}

@Component({
  selector: 'foo',
  template: `foo`,
  providers: [Service]
})
export class Foo implements OnDestroy {
  constructor(service: Service) {}

  ngOnDestroy() {
    console.log('foo destroy')
  }
}

@Component({
  selector: 'my-app',
  template: `<foo *ngIf="isFoo"></foo>`,
})
export class App {
  isFoo = true;

  constructor() {
    setTimeout(() => {
        this.isFoo = false;
    }, 1000)
  }
}

上のコードで Service に属するインスタンスです。 Foo コンポーネントに属するインスタンスなので Foo が破壊されたときに破壊されます。

ルートインジェクタに属するプロバイダでは、アプリケーションの破棄時に発生します。これは、テストなどで複数のブートストラップによるメモリリークを回避するのに役立ちます。

親インジェクタのプロバイダが子コンポーネントで購読されている場合、それはコンポーネント破棄時に破棄されません。 ngOnDestroy (に登録解除する必要があります(別の回答で説明されています)。