読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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の情報を取得できる)