angualr基礎之組件通信

組件通信

• 怎樣將父組件的屬性傳遞給子組件input

//在父組件裏引用子組件
<app-stars [roting]="product.stars"></app-stars>   //將product對象的stars屬性產給子組件的roting對象

//子組件接收父屬性
//在ts文件中
import {Component, Input} from "@angular/core";
@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit, OnChanges {

@input()//聲明這是一個接受數據的對象
private roting:number=0;//定義一個roting對象接收父屬性

  constructor() {
  }
}

• 怎樣將子組件的屬性傳到父組件（output）

// 子組件
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'my-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)">Agree</button> 
  `
})
export class VoterComponent { 
  @Output() onVoted = new EventEmitter<boolean>();
 //通過EventEmitter來創建向父組件傳遞數據的模型，後邊的泛型是要傳遞數據的類型
//onVoted是名字，需要綁定在標籤上，父組件接收是通過這個名字接收
  vote(agreed: boolean) {
    this.onVoted.emit(agreed); //通過模型向父組件發射數據
  }
}

// 父組件
import { Component } from '@angular/core';

@Component({
  selector: 'vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <my-voter *ngFor="let voter of voters"
      [name]="voter"
      (onVoted)="fnonVoted($event)">
   </my-voter> 
  `
  //my-voter是子組件，onVoted就是綁定的屬性
})
export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];

  fnonVoted(agreed: boolean) {//通過子組件上onVoted屬性綁定的這個方法接收
    agreed ? this.agreed++ : this.disagreed++;
  }
}

• 當子組件的屬性既想輸入又想輸出時需要給這個對象進行雙向數據綁定[(name)]=””
  
  • input()name
  • onput()nameChange這必須是這個名字
• 中間人模式
  
  • 父組件下的兩個子組件通過父組件通信

//首先通過output將子組件裏的數據發射到父組件，
//然後父組件直接將數據傳給另一個子組件顯示

//首先通過buy模型對象裏的方法接收子組件裏的數據
<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
//然後將數據傳遞給另一個組件
<app-order [priceQuote]="priceQuote"></app-order>

export class AppComponent {
//創建一個接收數據的對象
  priceQuote:PriceQuote = new PriceQuote("", 0);
  //接收數據，並將接收的數據賦予創建的對象
  buyHandler(event: PriceQuote) {
    this.priceQuote = event;
  }

//輸出數據的子組件
import {Component, OnInit, EventEmitter, Output} from '@angular/core';
@Component({
  selector: 'app-price-quote',
  templateUrl: './price-quote.component.html',
  styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {
  stockCode:string = "IBM";
  price: number;
  @Output('priceChange')//定義輸出對象
  lastPrice:EventEmitter<PriceQuote> = new EventEmitter();
  @Output()//定義輸出對象
  buy:EventEmitter<PriceQuote> = new EventEmitter();
  constructor() {
    setInterval(() => {
      let priceQuote:PriceQuote = new PriceQuote(this.stockCode, 100*Math.random());
      this.price = priceQuote.lastPrice;
      //將數據放入輸出對象中
      this.lastPrice.emit(priceQuote);
    }, 1000)
  }
  buyStock(event) {
  //點擊事件觸發調用這個方法將數據傳遞給buy模型對象
    this.buy.emit(new PriceQuote(this.stockCode, this.price));
    //將數據放入輸出對象中
  }
  ngOnInit() {
  }
}
export class PriceQuote {//創建這個對象
  constructor(public stockCode:string,
              public lastPrice:number
  ){
  }
}
}


//另一個子組件
export class OrderComponent implements OnInit {
  @Input()//直接接收就可以了。
  priceQuote:PriceQuote;
  constructor() {
  }
}

• @ViewChild()：類似的，也可以在腳本中用@ViewChild()來獲取子組件