🙌
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)を使用することで簡単に実現することができるのです。
参考
Discussion