學過angular的同學都知道,輸入框通過[(ngmodel)]
實現雙向資料繫結,那麼父子元件間能不能實現雙向資料繫結呢?答案是肯定的。
angular中,我們常常需要通過方括號和圓括號
()
實現元件間的互動:
那麼在和
()
的基礎上,如何實現元件的雙向資料繫結?
例子如下。
子元件:
toggle childstatus
export class childcomponent implements oninit
toggle()
}
注意這裡的寫法,這是關鍵所在,輸出屬性必須在輸入屬性的基礎上加上『-change』字尾。比如你的輸入屬性是mydata
,那麼輸出屬性就必須是mydatachange
。
父元件:
toggle parentstatus
import from '@angular/core';
@component()
parentstatus: boolean = true;
ngoninit()
toggle()
}在父元件我們初始化parentstatus
為true
,並把它傳到子元件childcomponent
。
在子元件裡,通過按鈕我們可以改變childstatus的值,可以看到,子元件中的值改變的同時,父元件的值也跟著改變了。反過來,在父元件中通過按鈕改變parentstatus的值,子元件中的值同樣也跟著變化:
angular元件雙向繫結
在寫專案時,需要編寫乙個元件,根據使用者選擇的單選框返回值,就像元件的雙向繫結。元件的雙向繫結就是子元件接受父元件的資料,父元件監聽子元件的事件來修改自己的值.output statechange instrumentstatechange new eventemitter 暴露乙個statecha...
Angular元件間傳值
在angular中,父元件呼叫子元件,可以傳遞引數,子元件根據傳遞過來的引數返回相應的資料 父元件向子元件傳參,過程如下 方法一 在子元件中 component inputs inputsvalue export class testcomponent 在父元件中 component export ...
Angular自定義元件實現資料雙向資料繫結的例項
學過angular的同學都知道,輸入框通過 ngmodel 實現雙向資料繫結,那麼自定義元件能不能實現雙向www.cppcns.com資料繫結呢?答案是肯定的。angular中,我們常常需要通過方括號和圓括號 實現元件間的互動 那麼在和 的基礎上,如何實現元件的雙向資料繫結?例子如下。子元件 www...