实例化 Injectable class 时未调用 ngOnInit

Question

Why isn't ngOnInit() called when an Injectable class is resolved?

Code

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()');
    }

}

Console Output

FROM constructor()

Answer 1

Lifecycle hooks , like OnInit() work with Directives and Components. They do not work with other types, like a service in your case. From docs:

A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM.

Directive and component instances have a lifecycle as Angular creates, updates, and destroys them.

Answer 2

I don't know about all the lifecycle hooks, but as for destruction, ngOnDestroy actually get called on Injectable when it's provider is destroyed (for example an Injectable supplied by a component).

From the docs :

Lifecycle hook that is called when a directive, pipe or service is destroyed.

Just in case anyone is interested in destruction check this question:

Answer 3

Adding to answer by @Sasxa ,

In Injectables you can use class normally that is putting initial code in constructor instead of using ngOnInit() , it works fine.

Answer 4

一旦我的 dataService 被初始化，我必须调用一个函数，相反，我在构造函数中调用它，这对我有用。

Answer 5

Note: this answer applies only to Angular components and directives, NOT services.

I had this same issue when ngOnInit (and other lifecycle hooks) were not firing for my components, and most searches led me here.

The issue is that I was using the arrow function syntax ( => ) like this:

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

Apparently that does not work in Angular 6. Using non-arrow function syntax fixes the issue:

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

Answer 6

we can trigger it by placing it in Constructor. But what is the reason ngOnInit() is not triggering.

Answer 7

In your service you can use resolvers for the same purpose, as explained in this post: https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

To understand the use of resolvers, Lets see how the flow happens, when someone clicks the link.

General Routing Flow.

• User clicks the link.
• Angular loads the respective component.

Routing Flow with Resolver

• User clicks the link.

• Angular executes certain code and returns a value or observable.

• You can collect the returned value or observable in constructor or in ngOnInit, in class of your component which is about to load.

• Use the collected the data for your purpose.

• Now you can load your component.

Steps 2, 3 and 4 are done with a code called Resolver.

Answer 8

As others have said, ngOnInit works on Components only.

Use the constructor in Injectable() services. It will serve your needs in most cases.

Answer 9

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

@Injectable()
export class MovieDbService implements OnInit {

userId:number=null;

constructor(private _movieDbRest: RestApiService,
            private instanceMyService : Service ){

   // do evreything like OnInit just on services

   this._movieDbRest.callAnyMethod();

   this.userId = this.instanceMyService.getUserId()


}