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という属性を利用することができる。 -->
@Input
については、以下のサイトがわかりやすかったです! http://qiita.com/armorik83/items/a14a4298ead3d18b58a3また、以下のような記述も可能。ただ、これだとtwo way data bindingができないのかな。
<search passedQuery='{{ query }}'></search> <!-- <search [passedQuery]='query'></search> と同じような意味だが、微妙に挙動がちがう。。。 -->