Djangoroidの奮闘記

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

Angular4入門_Vol.15

参考サイト

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

Passing Data to Components

  • search.component.ts にコードを追記する。
import { Component, OnInit, Input } from '@angular/core'; //Input をimportする。
import { Router } from '@angular/router';

@Component({
  selector: 'search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  searchLocation = 'Newport Beach';
  searchQuery: string; //文字列型のsearchQuery変数を定義する。

  @Input() //Inputデコレータを使う
  passedQuery: string; //passedQueryを文字列型で定義する。

  constructor(private router: Router ) { }
  ngOnInit() {
    console.log(this.passedQuery) //console.logに追記する。
  }

  submitSearch(event, formData){
    console.log(event)
    console.log(formData.value)
    let searchedQuery = formData.value['q']
    if (searchedQuery) {
      this.router.navigate(['/search', {q: searchedQuery}])
    }
  }
  searchQueryChange(){
    this.searchLocation = 'California'
  }

}
  • search-detail.component.htmlのsearch tagに、passedQuery の値を代入してみる。
<search class='text-center search-inline' passedQuery='hello'></search>

<p *ngIf='query'>
  Searched for <b>{{ query }}</b>
</p>
  • Inputは、tagから取ってこれるのか?よくわかんないな。。。

  • 試しに、queryを代入してみる。

<search class='text-center search-inline' [passedQuery]='query'></search>

<!--
* passedQueryを[]で囲む
* queryは、search-detailからのcontextで、それをsearchtagの元のcomponentの、search.component.tsのpassedQueryに代入される。
* query > passedQuery > console に表示されるという流れになっている。
 -->

<p *ngIf='query'>
  Searched for <b>{{ query }}</b>
</p>
  • さらにsearch.component.tsを修正する。
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  searchLocation = 'Newport Beach';
  searchQuery: string;

  @Input()
  passedQuery: string;

  constructor(private router: Router ) { }
  ngOnInit() {
    // console.log(this.passedQuery)
    if (this.passedQuery){ //passedQueryがある場合
      this.searchQuery = this.passedQuery // passedQueryをsearchQueryに代入する。
    }
  }

  submitSearch(event, formData){
    console.log(event)
    console.log(formData.value)
    let searchedQuery = formData.value['q']
    if (searchedQuery) {
      this.router.navigate(['/search', {q: searchedQuery}])
    }
  }
  searchQueryChange(){
    this.searchLocation = 'California'
  }

}
  • navbarのsearchboxに、同じような処理を追加するために、app.component.tsにコードを追記する。
import { Component, OnInit } from '@angular/core'; //OnInitを追加する
import { ActivatedRoute } from '@angular/router'; // ActivatedRouteをimport

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // template: `<h1>{{ title }} is cool!</h1> <p>{{ description }}</p>`, //templateには、直接htmlの記述もできる
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { // OnInitをimplementsする。
  title = 'Hello srvup!!2 ';
  description = '新しいアプリケーションです';
  query: string; // queryを定義
  private routeSub:any; // routeSubを定義する。

  constructor(private route: ActivatedRoute){}  // constructorで、routeを定義する。

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params=>{ //paramsを代入する
      console.log(params)
      this.query = params['q']
    })
  }
}
  • app.component.htmlを修正する。
<search [passedQuery]='query'></search>
<!-- search.component.tsの、passedQuery変数に、app.component.tsのqueryを代入する -->
  • ngOnInitではなく、constructorにコードを記載しても機能する。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // template: `<h1>{{ title }} is cool!</h1> <p>{{ description }}</p>`, //templateには、直接htmlの記述もできる
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Hello srvup!!2 ';
  description = '新しいアプリケーションです';
  query: string;
  private routeSub:any;

  constructor(private route: ActivatedRoute){
    this.routeSub = route.params.subscribe(params=>{
      console.log(params)
      this.query = params['q']
    })
  }

  ngOnInit() {
  }

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

まとめ

  • Inputデコーレータは、ほぼ予想通り、html内で、独自の属性を持たせることができるデコレータのようだ。
<search [passedQuery]='query'></search>
<!--
上記の場合 search.component.tsに、
@Input()
passedQuery: string;
と定義することで、searchタグ内で、passedQueryという属性を利用することができる。
 -->
<search passedQuery='{{ query }}'></search>
<!--
<search [passedQuery]='query'></search>
と同じような意味だが、微妙に挙動がちがう。。。
 -->