Angular 實現元件間雙向資料繫結

2022-07-21 11:36:12 字數 1022 閱讀 5132

學過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()

}在父元件我們初始化parentstatustrue,並把它傳到子元件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...