Angular4入門_Vol.9
参考サイト
https://www.codingforentrepreneurs.com/projects/try-angular-v4/
Angular Click Events
- home.component.html にclickeventを追記する。
<a class='' href="/videos/video-1" (click)='preventNormal($event)'>
- home.component.tsにpreventNormalを定義する。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor() { } ngOnInit() { } preventNormal(event:any){ console.log(event) event.preventDefault() alert("Working...") } }
これでDefaultで起動する、指定URLへの移動がpreventされて、alertが表示されるようになる!
ただ、なぜ$eventでないといけないかがよくわからない。。。(^^;)
home.component.tsの、event:anyの箇所を修正する。
preventNormal(event:MouseEvent){ console.log(event) event.preventDefault() alert("Working...") }
- 次にimageのリンクを取得して、それを(click)に代入してみる。
<div class="row"> <div class="col-sm-12"> <carousel class='text-center'> <slide> <a class='' #imageOne href="/videos/video-1" (click)='preventNormal($event, imageOne)'> <img class='img-main-carousel' src="assets/images/nature/4.jpg" alt="First slide"> </a> <div class="carousel-caption"> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p> </div> </slide> <slide> <a class='' #imageTwo href="/videos/video-1" (click)='preventNormal($event, imageTwo)'> <img class='img-main-carousel' src="assets/images/nature/5.jpg" alt="Second slide"> </a> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p> </div> </slide> <slide> <a class='' #imageThree href="/videos/video-1" (click)='preventNormal($event, imageThree)'> <img class='img-main-carousel' src="assets/images/nature/6.jpg" alt="Third slide"> </a> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p> </div> </slide> </carousel> </div> </div>
- home.component.tsに追記する。
preventNormal(event:MouseEvent, image:any){ event.preventDefault() console.log(image.getAttribute("href")) // imageは、elementのため、getAttributeで、属性を取得できる! // alert("Working...") }
- さらに、hrefに新しいurlをsetできるようにsetAttributeを使ってみる。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { prevented = false; // preventedを定義する。 constructor() { } ngOnInit() { } preventNormal(event:MouseEvent, image:any){ if (!this.prevented){ // preventedは、初期状態ではfalseのため、最初は実行される。 event.preventDefault() // MouseEventのデフォルトの挙動をpreventする。 console.log(image.getAttribute("href")) image.setAttribute("href", "/videos") // hrefに、/videosを代入(set)する this.prevented = true // 最後にpreventedをtrueにする。 } // alert("Working...") } }
- さらに, preventedをimageが持つpreventedに変更してみる。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { prevented = false; constructor() { } ngOnInit() { } preventNormal(event:MouseEvent, image:any){ if (!image.prevented){ event.preventDefault() // console.log(image.getAttribute("href")) image.setAttribute("href", "/videos") image.prevented = true } // alert("Working...") } }
*ngFor
を利用して、htmlを書き直すために、home.component.tsを修正する。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { // ここを追記する。 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'}, {image: "assets/images/nature/1.jpg", title: "Image 1", link:'/videos/video-1'} ] constructor() { } ngOnInit() { } preventNormal(event:MouseEvent, image:any){ if (!image.prevented){ event.preventDefault() image.setAttribute("href", "/videos") image.prevented = true } } }
*ngFor
を追記する。
<div class="row"> <div class="col-sm-12"> <carousel class='text-center'> <slide *ngFor='let imageObj of homeImageList'> <a class='' href="/videos/video-1" (click)='preventNormal($event, imageObj)'> <img class='img-main-carousel' [src]="imageObj.image" alt="First slide"> </a> <div class="carousel-caption"> <h3>{{imageObj.title}}</h3> <p><a class='btn btn-default' href='{{ imageObj.link }}'>Video 1</a></p> </div> </slide> </carousel> </div> </div>
ERROR TypeError: image.setAttribute is not a function
が表示される。なぜなら、imageObjは、Jsonオブジェクトのため、setAttributeをもっていない。最終的に以下のようにRouterのrouting機能を利用してセットした。
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; //Routeはimportする。 @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { 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'}, {image: "assets/images/nature/1.jpg", title: "Image 1", link:'/videos/video-1'} ] constructor(private router:Router) { } //routerをconstructorにセットする。 ngOnInit() { } preventNormal(event:MouseEvent, image:any){ if (!image.prevented){ event.preventDefault() // image.link = '/videos' // image.prevented = true; this.router.navigate(['./videos']) // navigate機能を利用して、'videos'にアクセスする。 } } }
まとめ
- $サインの意味は、
以下のように$eventオブジェクトを渡してください。$eventは、AngularJSで提供されるイベントオブジェクトです。
とのことなので、angularの場合は、eventは、$をセットする必要がある! imageOne -> imageOneが代入できる仕組み (たぶんid=imageOneという意味で、指定のtagの情報を取得できる)