Angular组件交互

1.目录结构

2.stock.ts

/**
 * 定义一份股份类
 */
export class Stock {
    constructor(
        public name: string,
        public price: number,
        public timestamp: Date
    ) {}
}

3.order.component.html

<div>
  这里是订单组件
</div>
<div>
  {{stock.name}}的{{stock.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}股票报价是{{stock.price | number:'2.2-2' }}
</div>
<button type="button" value="停止刷新" (click) = "onClick()">订单组件停止刷新</button>

4.order.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Stock } from '../model/stock';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  @Input()
  private stock: Stock;

  @Output()
  private stop: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  // 处理事件
  onClick() {
    // 发送事件
    this.stop.emit();
  }
}

5.quote.component.html

<div>
  这里是报价组件
</div>
<div>
  {{stock.name}}的{{stock.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}股票报价是{{stock.price | number:'2.2-2' }}
</div>

6.quote.component.ts

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { Stock } from '../model/stock';

@Component({
  selector: 'app-quote',
  templateUrl: './quote.component.html',
  styleUrls: ['./quote.component.css']
})
export class QuoteComponent implements OnInit {

  private stock: Stock = new Stock('MHCC', 0, new Date());
  private timer: any;

  // 使用@Output装饰器，并定义事件类型的对象，注：EventEmitter的导包路径是@angular/core
  @Output()
  public quote: EventEmitter<Stock> = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.timer = setInterval(() => {
      this.stock.price = Math.random() * 100;
      this.stock.timestamp = new Date();
      // 使用自定义的事件类型发送数据，参数可以为空，为空时表示不传递数据，但父组件模板捕获事件时会传递动作
      this.quote.emit(this.stock);
    }, 1000);
  }

  executeClear(msg: string) {
    console.log(msg);
    clearInterval(this.timer);
  }
}

7.app.component.html

<!-- 在父组件的模板中捕获事件 -->
<app-quote (quote) = "quoteHandler($event)" #clearInter></app-quote>
<p></p>
<app-order [stock] = "stock" (stop) = "stopHandler()"></app-order>
<p></p>
<div>
  <!-- 在父组件的模板中调用子组件的方法 -->
  <button type="button" (click) = "clearInter.executeClear('在模板中被父组件调用了')">父组件停止按钮</button>
</div>

8.app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Stock } from './model/stock';
import { QuoteComponent } from './quote/quote.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private stock: Stock = new Stock('', 0, new Date(null));

  /**
   * @ViewChild 调用子组件方法的装饰器
   * clearInter 子组件的id
   */
  @ViewChild('clearInter')
  private clearInter: QuoteComponent;

  // 处理捕获的事件
  quoteHandler(event: Stock) {
    this.stock = event;
  }

  // 处理捕获的事件
  stopHandler() {
    // 调用子组件的方法
    this.clearInter.executeClear('在控制器中被父组件调用了');
  }
}

9.app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OrderComponent } from './order/order.component';
import { QuoteComponent } from './quote/quote.component';

@NgModule({
  declarations: [
    AppComponent,
    OrderComponent,
    QuoteComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }