Angular の ngOninitの必要性 ~なぜconstructorではダメなのか~

Angularとは

「Angular（アンギュラー）」は、Googleによって開発されているJavaScriptフレームワークです。
アプリケーションを作成する時、ページをクリックしたときに発火させたいイベントが多々あります。それを実現させたいとき、ngOninitが必要となります。(constructorではできない）

constructorとは

Typescript,Javascriptに付随するものである
Classの初期化時に発火する

class Hoge {
    id: number
    constructor(num: number) { 
        this.id = num;
    }
}

let h = new Hoge(1)
console.log(h.id)
==> 1

ngOnInitとは

Angularに付随するものである。
Lifecycleの一部
Lifecycleとは、ディレクティブやコンポーネントが変化するタイミングで、コールバックを設定できる仕組みである。

つまり、AngularのLifeCycleに乗っ取った処理をすることができるのである。
下記で使用しているのは、AngularのLifeCycleの一つのngOnInitである。(Componentの初期化時に発火する)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hoge',
  templateUrl: './hoge.component.html',
  styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements OnInit {

  constructor(
  ) {
   console.log('constructor');
  }
 
  ngOnInit() {
    console.log('ngOnInit');
  }
}

===> 'constructor'
===> 'ngOnInit'

まとめ

Angularでは、constructorは、component作成途中で実行されます。
ngOnInitはcomponent作成後に呼び出されます。
したがって、アプリケーションを作成する時、ページをクリックしたときにイベントを発火させたいというようなUIUX観点から見た要件は、ngOnInit(LyfeCycle)を使用することで簡単に実現することができるのです。

参考