Day07 Angular牙起來 - 程式面介紹 繫結綁定2 小括號綁定法

繼續前一篇文章綁定成員

不過在此之前我想在遊戲中，替角色添加攻擊力屬性

修改 role.component.ts 檔案

...

export class RoleComponent implements OnInit {
  name = '初心冒險者';
  hp = 5;
  atk = 1;

  constructor() { }

  ngOnInit(): void {
    setInterval(() => {
      this.hp += 1;
    }, 1000)
  }
}

修改 role.component.html 樣板

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button>點我增加攻擊力</button>

目前畫面上有攻擊力了
我想要透過手動方式來增加攻擊力，每點擊一次攻擊力+1
於是有了一顆按鈕，只是目前點擊不會有任何反應

事件繫結 event binding

滑鼠點擊事件 onClick - (click)

我們在程式的class內加上一個 function: 增加攻擊力addAtk()
實作一個增加攻擊力的方法出來

其實在這使用 函式 function 稱呼其實不準確，正確來說是物件底下的 方法 method
後面講到Typescript章節時會重新提及，在此請先忽略

修改 role.component.ts

...

export class RoleComponent implements OnInit {
  name = '初心冒險者';
  hp = 5;
  atk = 1;

  constructor() { }

  ngOnInit(): void {
    setInterval(() => {
      this.hp += 1;
    }, 1000)
  }

  addAtk() {
    this.atk += 1;
  }
}

修改 role.component.html 樣板
在<button>身上掛上一個(click)，代表被點擊時會觸發，等同於Javascript中的onclick()事件。讓他點擊之後去觸發程式內的addAtk()function

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button (click)="addAtk()">點我增加攻擊力</button>

完成結果畫面

當然，(click)事件不一定都要綁在<button>
也可以綁在<div>上玩玩看

鼠標停留事件 onHover - (mouseEnter)、(mouseLeave)

Javascript的事件有很多種，當然Angular內建的事也有百百種囉

再來做一個小功能
當鼠標遮住玩家名稱時，自動改變顯示的名稱
這時就會用到Angular中的MouseEnter、MouseOver事件

修改 role.component.html 樣板

<h2>角色區塊</h2>
<div (mouseenter)="changeName1()" (mouseleave)="changeName2()">名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button (click)="addAtk()">點我增加攻擊力</button>

接著在 role.component.ts 的Class中放入以下兩個function
用來改變玩家名字的字串

...

  changeName1() {
    this.name = "勇者，你的游標擋到我名字了";
  }

  changeName2() {
    this.name = "謝謝，你很識相。";
  }

當網頁偵測到游標停留在 <div> 元素區塊上方時，就會去做指定的function

大功告成～

恭喜到這一步，已經學了48%的Angular！