web-dev-qa-db-ja.com

Injectableクラスがインスタンス化されたときにngOnInitが呼び出されない

Injectableクラスが解決されるときにngOnInit()が呼び出されないのはなぜですか？

コード

import {Injectable, OnInit} from 'angular2/core';
import { RestApiService, RestRequest } from './rest-api.service';

@Injectable()
export class MovieDbService implements OnInit {

    constructor(private _movieDbRest: RestApiService){
        window.console.log('FROM constructor()');
    }

    ngOnInit() {
         window.console.log('FROM ngOnInit()');
    }

}

コンソール出力

FROM constructor()
javascriptangulartypescript
163
Levi Fuller

OnInit()のようなライフサイクルフック はディレクティブとコンポーネントで動作します。あなたの場合のサービスのように、それらは他のタイプでは動作しません。ドキュメントから：

コンポーネントはAngular自身によって管理されるライフサイクルを持ちます。 Angularは、DOMから削除する前に、それを作成し、それをレンダリングし、その子を作成してレンダリングし、そのデータバインドプロパティが変更されたときにチェックして破棄します。

Angularが作成し、更新し、そして破棄するので、ディレクティブとコンポーネントインスタンスがライフサイクルを持っています。

251
Sasxa

私はすべてのライフサイクルフックについては知りませんが、破壊に関しては、プロバイダが破棄されるとngOnDestroyが実際にInjectableに呼び出されます（例えばコンポーネントによって提供されるInjectable）。

docs : から

ディレクティブ、パイプ、またはサービスが破棄されたときに呼び出されるライフサイクルフック。

万が一誰かが破壊に興味があるならチェック この 質問：

40
SBD580

注：この回答はAngularコンポーネントとディレクティブにのみ適用され、サービスには適用されません。

私はngOnInit（および他のライフサイクルフック）が私のコンポーネントのために起動していなかったとき、私はこれと同じ問題を抱えていた、そしてほとんどの検索は私をここに導いた。

問題は、私がこのように矢印関数の構文（=>）を使用していたことです。

class MyComponent implements OnInit {
    // Bad: do not use arrow function
    public ngOnInit = () => {
        console.log("ngOnInit");
    }
}

どうやらそれはAngular 6で動作しません。6.矢印以外の関数の構文を使用すると問題が解決します。

class MyComponent implements OnInit {
    public ngOnInit() {
        console.log("ngOnInit");
    }
}
3
AJ Richardson

サービスでは、この投稿で説明されているように、同じ目的でresolversを使用できます。 https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

リゾルバーの使用を理解するために、誰かがリンクをクリックしたときにフローがどのように発生するかを見てみましょう。

一般的なルーティングフロー

  • ユーザーがリンクをクリックします。
  • 角度はそれぞれのコンポーネントをロードします。

レゾルバを使用したルーティングフロー

  • ユーザーがリンクをクリックします。

  • Angularは特定のコードを実行し、値またはオブザーバブルを返します。

  • コンストラクターまたはngOnInit、ロードしようとしているコンポーネントのクラスで、返された値またはオブザーバブルを収集できます。

  • 収集したデータを目的に使用します。

  • これで、コンポーネントをロードできます。

ステップ2、3、および4は、Resolverと呼ばれるコードを使用して実行されます。

0
118218