Angular自定義元件實現資料雙向資料繫結的例項

2022-09-29 22:00:23 字數 868 閱讀 6941

學過angular的同學都知道,輸入框通過[(ngmodel)]實現雙向資料繫結,那麼自定義元件能不能實現雙向www.cppcns.com資料繫結呢?答案是肯定的。

angular中,我們常常需要通過方括號和圓括號()實現元件間的互動:

那麼在和()的基礎上,如何實現元件的雙向資料繫結?

例子如下。

子元件:

www.cppcns.com

export class testdatabindingcomponent implements oninit,5000);

}}注意這裡的寫法,這是關鍵所在,輸出屬性前半部分必須與輸入屬性相同,輸入屬性可以隨意取名,輸出屬性需在輸入屬性基礎上加上change,比如你www.cppcns.com的輸入屬性是mydata,那麼輸出屬性就必須是mydatachange。

父元件:

yzzguusirbgt;

import from '@angular/core';

@component()

export class appcomponent implements oninit,10000);

}}在父元件我們初始化parentstatus為true,並把它傳到子元件testdatabindingcomponent。

在子元件裡,5秒後我們把childstatus設為false,看它能不能傳到父元件。再過5秒,我們在父元件將parentstatus設為true,看它能不能傳到子元件。

事實證明,子元件值變化後,父元件的值也跟著變化;父元件值變化後子元件的值也跟著變了!

我們實現了雙向繫結!

檢視本文**和效果,可點選這裡。

本文標題: angular自定義元件實現資料雙向資料繫結的例項

本文位址:

angular自定義分頁元件 實用

html模組 controller模組 var context scope scope.reloaddata reloaddata 重要 需要與頁面的事件進行繫結 function reloaddata page directive模組 function link function scope,el...

angular 自定義指令

模板 var mymodule angular.module mymodule mymodule.directive directivename function return restrict string,template string,templateurl string,priority n...

自定義元件

myedittext 清除輸入的資料 setcompunddrawable 設定edittext ontouchevent ondraw 作用 繪製view顯示的內容,由系統自動呼叫 常用類 paint,canvas invalidate,postinvalidate 貪吃蛇原理 改變集合中的資料,...