14 点击事件 Angular Click Events

14 -- Angular Click Events

前一节最后，我们添加到一些链接。这一节，我们将会讲解如果在angular中使用event，并且用event来处理这些链接。

给链接添加点击事件preventNormal，传递参数为event

<a class="" href="/videos/video-1" (click)="preventNormal($event)"><img class="img-main-carousel img-responsive" src="assets/images/nature/4.jpg" alt="first slide" ></a>

在home.component.ts添加处理函数

  preventNormal(event:any){
      console.log(event)
      event.preventDefault() 
      alert("working ...")
  }

刚开始如果不知道事件类型，可以先声明为any，然后用console.log(event)打印这个事件，本例中事件为MouseEvent，所以上面参数可以修改为event:MouseEvent

preventDefault会阻止默认的行为（跳转）

那我们怎么知道刚刚点击的是哪个按钮呢？我们可以给每个链接（a）添加model，并将这个值传递给事件函数，如下

        <a class="" #imageOne href="/videos/video-1" (click)="preventNormal($event, imageOne)"><img class="img-main-carousel img-responsive" src="assets/images/nature/4.jpg" alt="first slide" ></a>

在事件函数里，动态的给这些链接添加href

  prevented = false
  preventNormal(event:MouseEvent, image:any){
      if(!this.prevented){
        event.preventDefault()           
        console.log(image.getAttribute("href"))
        image.setAttribute("href", "/videos")
        this.prevented = true
      }
  }

也可以不用全局的prevented变量，而是针对不同的image不同的控制，修改如下

  preventNormal(event:MouseEvent, image:any){
      if(!image.prevented){
        event.preventDefault()           
        image.setAttribute("href", "/videos")
        image.prevented = true
      }
  }

到目前为止，基本的事件处理已完成。

前面的例子中，分别由多段来描述同样的事情，接下来我们来进一步优化处理。

首先定义相关的变量

  homeImageList = [
    { image: "assets/images/nature/4.jpg", title:"Image 4", link:"videos/video-1"},
    { image: "assets/images/nature/5.jpg", title:"Image 5", link:"videos/video-1"},
    { image: "assets/images/nature/6.jpg", title:"Image 6", link:"videos/video-1"},
  ]

修改模板代码，将固定值改成变量，注意几个用法

循环访问用*ngFor='let imageObj of homeImageList'

click事件 (click)="preventNormal($event, imageObj)"

图片源 [src]="imageObj.image"

<div class="jumbotron">
  <div class="container">
    <carousel>
      <slide class="text-center" *ngFor='let imageObj of homeImageList'>
        <a class="" href="/videos/video-1" (click)="preventNormal($event, imageObj)"><img class="img-main-carousel img-responsive" [src]="imageObj.image" alt="first slide" ></a>
        <div class="carousel-caption d-none d-md-block">
          <h3>{{ imageObj.title }}</h3>
          <a class="btn btn-default" href="{{ imageObj.link }}"> Video 1</a>
        </div>
      </slide>
    </carousel>
  </div>
</div>

同时修改事件处理函数内容

  preventNormal(event:MouseEvent, image:any){
      if(!image.prevented){
        event.preventDefault()
        image.link = "/videos"
        image.prevented = true
      }
  }
  ```
  但是这儿它并不会自动跳转，我们引入Router模块来处理

  ``` typescript
  import { Router } from '@angular/router';

  constructor(private router:Router) { }  
    preventNormal(event:MouseEvent, image:any){
      if(!image.prevented){
        event.preventDefault()
        this.router.navigate(["./videos"])
      }
  }

这样点击图片就能直接跳转到/videos路径了。