web-dev-qa-db-ja.com

Angular 5のサービスのライフサイクルは何ですか

角度5

サービスはいつ作成および破棄されますか、そのライフサイクルフック（存在する場合）はどのようなもので、コンポーネント間でデータはどのように共有されますか？

[〜＃〜] edit [〜＃〜]：明確にするために、これは[〜＃〜] not [〜＃〜]コンポーネントのライフサイクルに関する質問です。この質問は、サービスのライフサイクルに関するものです。サービスにライフサイクルがない場合、コンポーネントとサービス間のデータの流れはどのように管理されますか？

angularlifecycleangular-services
22
rahs

サービスには2つのスコープがあります。

サービスがモジュールで宣言されている場合、すべてのインスタンスが同じインスタンスを共有しているため、サービスが必要な最初のコンポーネント/ディレクティブ/サービス/パイプが作成されるときにサービスが構築されます。その後、モジュール自体が破棄されるときに破棄されます（ほとんどの場合、ページがアンロードされます）

サービスがコンポーネント/ディレクティブ/パイプで宣言されている場合、関連するコンポーネント/ディレクティブ/パイプが破棄されるときにコンポーネント/ディレクティブ/パイプが作成および破棄されるたびに1つのインスタンスが作成されます。

アクションで確認できます

コードテスト：2つのサービスは、作成/破棄されたときに表示するために作成されます。

@NgModule({
  providers: [GlobalService] // This means lifeCycle is related to the Module, and only one instance is created for the whole module. It will be created only when the first element who needs it will be created.
})
export class AppModule { }

2番目のサービスはローカルコンポーネントサービスであり、hello-componentインスタンスが作成されるたびに作成され、hello-componentが破棄される直前に破棄されます。

@Injectable()
export class LocalService implements OnDestroy{
  constructor() {
    console.log('localService is constructed');
  }

  ngOnDestroy() {
    console.log('localService is destroyed');
  }
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [LocalService]
})
export class HelloComponent implements OnInit, OnDestroy {
  @Input() name: string;

  constructor(private localService: LocalService, private globalService: GlobalService) {}

  ngOnInit(){
    console.log('hello component initialized');
  }

  ngOnDestroy() {
    console.log('hello component destroyed');
  }
}

ご覧のとおり、Service in angularはOnDestroyライフサイクルフックを持つことができます。

24
Yanis-git

サービスはプロバイダーのスコープ内にのみ存在するため、モジュールまたは単一のコンポーネントのスコープ内に存在します。それらは、初めて注入されたときにインスタンス化され、プロバイダーが存在する限りキープアライブします。

サービスは通常のクラスであるため、Angularsのライフサイクルフックは適用されません。

1
Fussel

サービスは、Angular with @Injectableメタデータ。したがって、基本的にサービスのライフサイクルフックは、Angularのコンポーネントライフサイクルに似ています。これまで試したことはありませんが、ngOnInitngOnDestroyなどのように、サービス中のすべてのメソッド/フックを呼び出すことができると思います。

Angularでは、すべてのライフサイクルフックがフレームワークによる変更検出の一部としてトリガーされます。

詳細については、公式ドキュメントを参照してください。

0
Pardeep Jain