Angular4入門_Vol.14

参考サイト

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

Search Detail

• search.component.tsにrouterをつける。

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

@Component({
  selector: 'search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  searchLocation = 'Newport Beach'
  constructor(private router: Router ) { } // constructorに、routerを定義する。

  ngOnInit() {
  }

  submitSearch(event, formData){
    console.log(event)
    console.log(formData.value)
    let query = formData.value['q'] // formDataから、qの値を取り出し、queryという変数に代入する。
    if (query) {
      this.router.navigate(['/search', {q: query}]) // navigateで、/search;q=　というurlにあくせすするように設定する。
    }
  }
  searchQueryChange(){
    this.searchLocation = 'California'
  }

}

• これで、searchを実行してみる。。。Error発生！

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'search;q=ddd'
Error: Cannot match any routes. URL Segment: 'search;q=ddd'

• urlを設定する必要あり。app.routing.tsに追記する。

const appRoutes: Routes = [
...
  {
    path:"search", // /search の場合のcomponentをセット
    component: VideoListComponent,
  }
  ...
]

• これで、searchをクリックすると、video-listのpageにアクセスされていればOK！

• search-detail componentを作成する。ng g component search-detailを実行する。

• app.routing.tsのpath: “search"の箇所のcomponentを、SearchDetailComponentに変更する。

import { SearchDetailComponent } from './search-detail/search-detail.component';
...
  {
    path:"search",
    component: SearchDetailComponent,
  },

• searchボタンをクリックして、search-detail works!が表示されていればOK！

• search-detail.component.tsを編集する。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; // ActivatedRouteをimportする。Routerとの違いは何か？

@Component({
  selector: 'app-search-detail',
  templateUrl: './search-detail.component.html',
  styleUrls: ['./search-detail.component.css']
})
export class SearchDetailComponent implements OnInit, OnDestroy {
  private routeSub:any; // routeSubを定義する。
  constructor(private route: ActivatedRoute) { } // route: ActivatedRouteを定義する

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params=>{
      console.log(params) //route.paramsをsbuscribeして、成功した場合、paramsをconsoleに表示する。
    })
  }

  ngOnDestroy(){ //OnDestroyのときに、unsubscribeする。
    this.routeSub.unsubscribe()
  }

}

• search-detail.component.tsをさらに修正する。

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

@Component({
  selector: 'app-search-detail',
  templateUrl: './search-detail.component.html',
  styleUrls: ['./search-detail.component.css']
})
export class SearchDetailComponent implements OnInit, OnDestroy {
  private routeSub:any;
  query: string; // queryを定義する。
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params=>{
      console.log(params)
      this.query = params['q'] // paramsから、qのvalueを取り出して、queryに代入する。
    })
  }

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

}

• queryを、search-detail.component.htmlに表示させる。

<p>
  Searched for {{ query }}
</p>

• searchボタンをクリックしたら、q= 以降のvalueが、queryに代入されて、表示される。

• search boxの値が空の場合と、そうでない場合で分ける。

<p *ngIf='query'>
  Searched for <b>{{ query }}</b>
</p>

<div class="text-center" *ngIf='!query'>
  <h1>Search Something</h1>
  <search></search>
</div>

• サーチボックスの体裁を整える。

<search class='text-center search-inline'></search>

<p *ngIf='query'>
  Searched for <b>{{ query }}</b>
</p>

• style.cssに、search-inlineを追記する。

/* You can add global styles to this file, and also import other style files */
.main-container{
  min-height: 800px;
  margin-bottom: 20px;
}

.img-main-carousel{
  max-height: 500px;
  margin: 0 auto;
}

.carousel-control.right, .carousel-control.left{
  cursor: pointer;
}

.search-inline .navbar-left, .search-inline .navbar-right{
  float: none !important;
}

まとめ

• RouterとActivatedRouteの違いは、Routerは、別のurlにアクセスするためのモジュールで、ActivatedRouteは、現在のurlからparamsなどのvalueを取得するためのモジュール。

• search componentのRouterで、path:search にアクセス。path:searchにアクセスしたあとは、search-detail.componentが実行されるという二段構えになっている。