Angular4入門_Vol.18

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/

Video Item Model

• video classを作成するために、video.tsファイルを作成する。これはdjangoで言うと、modelsを使うようなものか。

export class VideoItem {
  slug: string;
  name: string;
  image: string;
  embed?: string; //optionalな場合は、最後に?をつけるということか？
  featured?: Boolean;
}

• video-list.component.tsのvideoListの型定義を、VideoItemに設定する。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { VideoItem } from '../videos/video'; // VideoItem class をimportする。
import { VideoService } from '../videos/videos.service';

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css'],
  providers: [VideoService]
})
export class VideoListComponent implements OnInit {
  private req:any; // req のアノテーション
  title = "Video List!";
  // someItem = "<h1>HiHi</h1>";
  // todayDate;
  videoList: [VideoItem]; // VideoItemのリスト型を定義する。

  constructor(private _video:VideoService) { }

  ngOnInit() {
    // this.todayDate = new Date();
    this.req = this._video.list().subscribe(data=>{
      this.videoList = data as [VideoItem]; // VideoItemのリスト型を定義する。
    }); //
  }

  ngOnDestroy(){
    this.req.unsubscribe()
  }

  getEmbedUrl(item){
    return 'https://www.youtube.com/embed/' + item.embed;
  }

}

• video-detail.component.tsも同様にVideoItem classを追記する。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { VideoItem } from '../videos/video';
import { VideoService } from '../videos/videos.service';


@Component({
  selector: 'video-detail',
  templateUrl: './video-detail.component.html',
  styleUrls: ['./video-detail.component.css'],
  providers:[VideoService]
})
export class VideoDetailComponent implements OnInit, OnDestroy {
  private routeSub:any;
  private req:any;
  video: VideoItem;
  slug: string;
  constructor(private route: ActivatedRoute, private _video:VideoService) { }

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params => {
    this.slug = params['slug']
    this.req = this._video.get(this.slug).subscribe(data=>{
    this.video = data as VideoItem
      })
    })
  }
  ngOnDestroy(){
    this.routeSub.unsubscribe()
    this.req.unsubscribe()
  }

}

• search-detail.component.ts にも追記する。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { VideoItem } from '../videos/video'; // VideoItemをimport する
import { VideoService } from '../videos/videos.service';


@Component({
  selector: 'app-search-detail',
  templateUrl: './search-detail.component.html',
  styleUrls: ['./search-detail.component.css'],
  providers: [VideoService]
})
export class SearchDetailComponent implements OnInit, OnDestroy {
  private routeSub:any;
  private req:any;
  query: string;
  videoList: [VideoItem]; // VideoItem　のリスト型を定義する

  constructor(private route: ActivatedRoute, private _video:VideoService) { }

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params=>{
      console.log(params)
      this.query = params['q']
      this.req = this._video.search(this.query).subscribe(data=>{
        this.videoList = data as [VideoItem]; // VideoItemのリスト型を定義する。
      })
    })
  }

  ngOnDestroy(){
    this.routeSub.unsubscribe()
  }

  getEmbedUrl(item){
    return 'https://www.youtube.com/embed/' + item.embed;
  }

}

• home.component.tsにも追加する。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

import { VideoItem } from '../videos/video'; // VideoItem import
import { VideoService } from '../videos/videos.service'; // VideoService import

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [VideoService] //providersに、VideoServiceを定義する
})
export class HomeComponent implements OnInit, OnDestroy {
  private req: any;
  homeImageList: [VideoItem] = [] as [VideoItem] ; //VideoItemのリスト型を定義する。さらに、初期値として、空のリストを渡しておく
  // [] のあとに、as [VideoItem]は必須の模様。代入するときはそのデータのclass定義が必要なのか？よくわからないな。
  //   homeImageList = [] as [VideoItem] ;は通った。
  // あ〜そうか、VideoItemで定義された homeImageListには、何も型定義していない空のリストは、型が不明のため、VideoItem classで定義された空のリストでないと代入できないのか。

  constructor(private http:Http, private router:Router, private _video:VideoService) { } //_video を定義する

  ngOnInit() {
    this.req = this._video.list().subscribe(data=>{ // _video.list()で、呼び出す。
      // console.log(data.json())
      //this.homeImageList = [] as [VideoItem]
      data.filter(item=>{
        if(item.featured){
          this.homeImageList.push(item)
        }
      })
      // this.homeImageList = data.json();
    })
  }

  ngOnDestroy(){
    this.req.unsubscribe()
  }

  preventNormal(event:MouseEvent, image:any){
    if (!image.prevented){
      event.preventDefault()
      // image.link = '/videos'
      // image.prevented = true;
      this.router.navigate(['./videos'])
  }
}

}

まとめ

• angularのclassは、djangoのmodelのような使い方ができる。
• 型の定義が厳密になるため、エラーチェックなどに有効