angular 父子元件通訊

父元件不僅可以給子元件傳遞簡單的資料，還可以把自己的方法以及整個父元件傳給子元件

子元件獲取父元件的 msg 資料

父元件呼叫子元件的時候傳入資料

[msg]

="msg"

>

>

子元件引入 input 模組

import

from
'@angular/core'

export

class
soncomponent
implements
oninit
}

父元件呼叫子元件的時候傳入方法

[run]

="run"

>

>

子元件引入 input 模組

import

from
'@angular/core'

export

class
soncomponent
implements
oninit
}

父元件呼叫子元件的時候傳入 this （接收引數 all 是任意的）

[all]

="this"

>

>

子元件引入 input 模組

import

from
'@angular/core'

export

class
soncomponent
implements
oninit
}

給子元件 dom 節點起個名字

#son

>

>

父元件引入 viewchild 模組

import

from
'@angular/core'

@viewchild

('son'
) son: any
ngafterviewinit()
:void

子元件引入 output 和 eventemitter

import

from
'@angular/core'

// 用 eventemitter 和 output 裝飾器配合使用 指定型別的變數

@output()
private outer =
neweventemitter
()

ngoninit()

sendparent()

son(outer)

="runparent($event)"

>

<

父元件接收到資料會呼叫自己的 runparent 方法，這個時候就能拿到子元件的資料

runparent

(val)

angular 父子元件通訊

1.子元件呼叫父元件的方法和資料 input 裝飾器 1.fathercomponent.html中 tochildstr 父元件中定義的資料 fathermethod 父元件中的方法 fathercomponent 父元件本身，this指代父元件例項，通過 fathercompoent 將父元件例...

Angular元件 父子元件通訊

angular元件間通訊 元件之間松耦合，元件之間知道的越少越好。元件4裡面點選按鈕，觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...

angular6之父子元件通訊

父元件向子元件傳入資料 父元件訪問子元件的方法和資料 方法一 新增方法二 父元件ts 中呼叫子元件的方法和屬性。首先匯入模組viewchild。import from angular core 在父元件的類中將子元件作為viewchild注入到父元件中 viewchild additemcompon...