Great question! This is one of the most common gotchas for Angular beginners, so let’s break it down clearly with real-world context.

What’s the Constructor? #

First off, the constructor is not an Angular feature — it’s a native JavaScript/TypeScript constructor that gets called when Angular creates an instance of your component or service.

• Primary uses:
  • Handling dependency injection: This is where you declare services (like HttpClient or your custom services) that your component needs. Angular injects these instances here automatically.
  • Basic class-level initialization: Setting simple default values for class properties, as long as they don’t depend on Angular’s lifecycle or the DOM.
• Critical note: At this point, your component’s view hasn’t been initialized, and any @Input properties haven’t been passed in yet. If you try to access DOM elements or @Input values here, you’ll almost certainly get undefined.

What’s ngOnInit? #

ngOnInit is an Angular-specific lifecycle hook that belongs to the OnInit interface (which is why you need to import it and implement it in your component, like your code shows).

• When it runs: It fires right after the constructor finishes, once Angular has fully initialized the component — including binding @Input properties and setting up the initial view.
• Primary uses:
  • Running component initialization logic: This is the perfect place to fetch data from a service, set up form controls, or initialize subscriptions.
  • Working with @Input values: Since @Input properties are now available, you can safely use them here (like passing an itemId to a data service to fetch related data).

Example Code to See the Difference #

Let’s expand your basic code to show execution order and practical use cases:

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-user-profile',
  template: `<h2>{{ user.name }}</h2>`
})
export class UserProfileComponent implements OnInit {
  @Input() userId: string;
  user: { name: string };

  // Constructor handles dependency injection
  constructor(private dataService: DataService) {
    console.log('Constructor executed');
    console.log('userId in constructor:', this.userId); // Output: undefined (Input not bound yet)
  }

  // ngOnInit runs after component initialization
  ngOnInit(): void {
    console.log('ngOnInit executed');
    console.log('userId in ngOnInit:', this.userId); // Output: The actual userId passed via Input
    // Fetch user data using the userId — this belongs here!
    this.dataService.getUser(this.userId).subscribe(userData => {
      this.user = userData;
    });
  }
}

Quick Recap #

• Constructor: Think of it as the "class setup step" — use it for dependency injection and simple class property defaults. Avoid anything that relies on Angular’s component lifecycle or DOM.
• ngOnInit: Think of it as the "component functionality setup step" — use it for data fetching, subscriptions, or any logic that needs the component to be fully initialized (including access to @Input values).

内容的提问来源于stack exchange，提问作者Sujan Maharjan