單向資料繫結

首先認識一下資料繫結:

       Angular中的資料繫結指的是同一組件中的控制器檔案(.ts)與模板檔案(.html)之間的資料傳遞。

再認識一下單向資料繫結:

       控制器檔案向模板檔案傳遞    或者模板檔案向控制器檔案賦值

單項資料繫結有兩種:

 1.控制器檔案->模板檔案

模板檔案程式碼:

<div>

       <img src=”../assets/p1.png”>

       <img [src]=”imgUrl”>

       <img src=”{{imgUrl}}”>

</div>

控制器檔案程式碼:

imgUrl=’../assets/p1.png’;

結果:三張一摸一樣的照片

這種方法是將ts檔案中變數imgUrl的值傳遞到html檔案中的imgUrl中

2. 模板檔案->控制器檔案

模板檔案程式碼:

<input (keyup)=”keyPress($event)”>

控制器檔案程式碼:

title=””;

keyPress(e){

       title=e.keyCode;

       console.log(e.keyCode);

}

結果:在控制檯中可以看到列印的輸入的值

這種方法是將html檔案中的輸入的值在ts檔案中接收