κΈ°λ₯ μ μμ²νκ±°λ λ²κ·Έλ₯Ό λ³΄κ³ νμκ² μ΅λκΉ?
μνκ±΄μ§ λ²κ·ΈμΈμ§ λͺ¨λ₯΄κ² μ
νμ¬ νλμ 무μμ
λκΉ?
첫 λ²μ§Έ $onChanges
νΈμΆμ $onInit
νΈμΆ μ μ μνλ©λλ€.
Angular 1.6 κΈ°λ³Έ ꡬμ±(μ¬μ ν λΉ = false)μ μ¬μ©νλ©΄ μμ±μμμ λ°μΈλ©μ μμ§ μ‘μΈμ€ν μ μλ κ²½μ° $onInit
ν¨μμμ 컨νΈλ‘€λ¬ μνλ₯Ό μ΄κΈ°ννλ κ²μ΄ μ’μ΅λλ€.
μμλλ λμμ 무μμ
λκΉ?
$onInit
λ¨Όμ νΈμΆνλ κ²μ΄ λ λ
Όλ¦¬μ μ΄λΌκ³ μκ°ν©λλ€.
Angularλ 컨νΈλ‘€λ¬κ° μμ ν μ΄κΈ°νλμ§ μμ λμμλ μ무 κ²λ ν΄μλ μ λ©λλ€.
νλμ λ°κΎΈλ λκΈ°/μ¬μ© μ¬λ‘λ 무μμ
λκΉ?
μ°λ¦¬λ λ§λ€ μ ν΄μΌνλ κ°μ²΄λ₯Ό μ¬μ©νλ κ²½μ° $onInit
ν¨μ $onChanges
κΈ°λ₯μ; 컨νΈλ‘€λ¬κ° μμ§ μ΄κΈ°νλμ§ μμκΈ° λλ¬Έμ 첫 λ²μ§Έ νΈμΆμμ μ€λ₯κ° λ°μν©λλ€.
ν΄κ²°μ±
μ μμ±μ λ΄μμ ν΄λΉ κ°μ²΄λ₯Ό μ΄κΈ°ννλ κ²μ΄μ§λ§ 컨νΈλ‘€λ¬λ₯Ό λ κ³³μμ μ΄κΈ°νν κ²μ
λλ€...
μ΄λ€ λ²μ μ Angularμ μ΄λ€ λΈλΌμ°μ /OSκ° μ΄ λ¬Έμ μ μν₯μ λ°μ΅λκΉ? λν μ΅μ μμ λ° μ€λ
μ·(https://code.angularjs.org/snapshot/) λ²μ μΌλ‘ ν
μ€νΈνμμμ€.
μ΅κ·€λ¬ 1.6 λ²μ
μ΄κ²μ μλλ κ²μ
λλ€(μ£Όλ‘ Angular 2+ λμκ³Ό μΌμΉμν€κΈ° μν¨). λμΉ κ²½μ° $onChanges
μ isFirstChange()
λ©μλμ λ°ν κ°μ νμΈνμ¬ $onChanges
μ 첫 λ²μ§Έ($onInit μ΄μ ) νΈμΆμΈμ§ νμΈν μ μμ΅λλ€ SimpleChange
κ°μ²΄:
{
...
bindings: {foo: '<'},
controller: function SomeController() {
this.$onChanges = function(changes) {
if (changes.foo.isFirstChange()) {
// `$onInit()` has not been called yet...
}
};
}
}
λλ λμ 첫 λ°μμ΄ λκ°μλ€λ κ²μ μΈμ νλ€. λ©ν λͺ¨λΈμ κ΄μ μμ 보면 $onInit()
κ° μ»¨νΈλ‘€λ¬μμ κ°μ₯ λ¨Όμ μΌμ΄λλ μΌμ΄λΌκ³ μκ°νλ κ²μ΄ λ μ½μ΅λλ€. $onChanges()
, $onChanges()
, $onChanges()
κ·Έλ¦¬κ³ λ§μ§λ§μΌλ‘ $onDestroy()
.
νμ§λ§ μκ°ν΄λ³΄λ©΄ $onInit
λ₯Ό νΈμΆνκΈ° μ μ λ°μΈλ©μ νκ°νκ³ μ»¨νΈλ‘€λ¬ μΈμ€ν΄μ€μ ν λΉν΄μΌ ν©λλ€. κ·Έλ¦¬κ³ κ·Έλ κ² ν¨μΌλ‘μ¨ (μ΄μ μ μ μλμ§ μμ) κ°μ λ³κ²½μ΄ κ°μ§λκ³ , $onChanges
λ₯Ό ν΅ν΄ λ³΄κ³ λμ΄μΌ ν©λλ€.
λ«λ μ€μ λλ€. μμλλ‘(λλ μ΅μν μλν λλ‘ :wink:) μλνκΈ° λλ¬Έμ λλ€.
λ΅λ³ν΄ μ£Όμ μ κ°μ¬ν©λλ€. μ΄μ λ λͺ νν΄μ§λλ€. :)
λλ μ΄κ²μ΄ μλμ μ΄λΌλ κ²μ μ΄ν΄ν©λλ€. $onInit() λ΄λΆμ $onChanges() ν¨μμ μ μλ₯Ό λ±λ‘νλ©΄ μ΄λ»μ΅λκΉ?
@bharatpatil , AngularJS(1.x.)μμλ μλν΄μΌ νμ§λ§ Angular(2+)μμλ μλνμ§ μμ΅λλ€.
if (changes.foo.isFirstChange()) {
//$onInit()
λ μμ§ νΈμΆλμ§ μμμ΅λλ€...
}
@gkalpak λλ μ΄ μ£Όμ₯μ΄ νλ Έλ€κ³ μκ°νλ€. binding.isFirstChange()
λ©μλλ κ΄λ ¨λ λ°μΈλ©μ΄ μ²μ νΈμΆλμμμ 보μ₯ν©λλ€. μλΉμ€ νΈμΆ ν μ΄κΈ°νλλ λ°μΈλ©μ μκ°μ΄ λ무 μ€λ κ±Έλ¦°λ€κ³ μκ°νμμμ€. μ΄ κ²½μ° controller.$onInit
λ°©λ²μ μ μ νΈμΆ ν νμκ° controller.$onChanges
λ°©λ². λ΄κ° μλͺ»?
λ°μΈλ©μ νμ μμ λΆλΆμ κ°μ κ°μ§λ©°( undefined
μΌ μ μμ) μ΄ κ°μ νμ μ¬μ μ΄κΈ°νλ κ°κ³Ό λ€λ¦
λλ€. λ°λΌμ, $onChanges()
νμ νΈμΆλ©λλ€ changes.foo
νΈμΆνκΈ° μ μ $onInit()
.
λ°μΈλ©μ΄ μ΄κΈ°ν λκΈ° μ μ κ°μ κ°μ§ μ μλ€λ κ²μ λ Όλ¦¬μ μ΄μ§ μμ΅λλ€. μ΄κ²μ΄ initialise(μ΄κΈ°κ° μ€μ )λΌλ λ¨μ΄μ μ¬μ μ μμ λλ€. μ΄κΈ° κ°μ΄ μμΌλ©΄ λ³κ²½ν μ μμ΅λλ€. μ¬κΈ° λ€μ΄λ°μ΄ λ€ νλ¦¬κ³ λΆμμ°μ€λ½λ€κ³ μκ°ν©λλ€.
λ€μ μ½λμ κ°μ κ²μ μμ±νλλ‘ κ°μλ°μ§ μμ μν©μ κΈ°μ΅ν μ μμ΅λλ€.
$onChanges(changesObj: { [index: string]: angular.IChangesObject; }) {
if (!this.isInitialized) return;
...
}
"μ΄κΈ°ν" μ μ "λ³κ²½"μ νΈμΆνλ κ²μ μλ―Έκ° μμ΅λλ€.
Angularλ₯Ό μ¬μ©νλ κ³Όμ μ λν νκ° ... λ³κ²½ μ μ μ΄κΈ°νκ° λ°μν κ²μΌλ‘ μμνλ μ΄μ λ 무μμ λκΉ?
κ°μ₯ μ μ©ν λκΈ
μ΄κ²μ μλλ κ²μ λλ€(μ£Όλ‘ Angular 2+ λμκ³Ό μΌμΉμν€κΈ° μν¨). λμΉ κ²½μ°
$onChanges
μisFirstChange()
λ©μλμ λ°ν κ°μ νμΈνμ¬$onChanges
μ 첫 λ²μ§Έ($onInit μ΄μ ) νΈμΆμΈμ§ νμΈν μ μμ΅λλ€SimpleChange
κ°μ²΄:#
λλ λμ 첫 λ°μμ΄ λκ°μλ€λ κ²μ μΈμ νλ€. λ©ν λͺ¨λΈμ κ΄μ μμ 보면
$onInit()
κ° μ»¨νΈλ‘€λ¬μμ κ°μ₯ λ¨Όμ μΌμ΄λλ μΌμ΄λΌκ³ μκ°νλ κ²μ΄ λ μ½μ΅λλ€.$onChanges()
,$onChanges()
,$onChanges()
κ·Έλ¦¬κ³ λ§μ§λ§μΌλ‘$onDestroy()
.νμ§λ§ μκ°ν΄λ³΄λ©΄
$onInit
λ₯Ό νΈμΆνκΈ° μ μ λ°μΈλ©μ νκ°νκ³ μ»¨νΈλ‘€λ¬ μΈμ€ν΄μ€μ ν λΉν΄μΌ ν©λλ€. κ·Έλ¦¬κ³ κ·Έλ κ² ν¨μΌλ‘μ¨ (μ΄μ μ μ μλμ§ μμ) κ°μ λ³κ²½μ΄ κ°μ§λκ³ ,$onChanges
λ₯Ό ν΅ν΄ λ³΄κ³ λμ΄μΌ ν©λλ€.λ«λ μ€μ λλ€. μμλλ‘(λλ μ΅μν μλν λλ‘ :wink:) μλνκΈ° λλ¬Έμ λλ€.