(十二)、Angular4.0 输出属性

系统管理员 2022-05-28 08:35 160阅读 0赞

**一、组件内属性输出给外部使用(适用于父子关系的组件)**

**二、创建一个新项目demo3**

**三、新建组件price-quote**

ng g component priceQuote

**四、在price-quote.component.ts中新建PriceQuote对象**

import {Component, EventEmitter, Input, OnInit, 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 = 'IBM';
    
      price: number;
    
      @Output()
      priceChange: EventEmitter<PriceQuote> = new EventEmitter<PriceQuote>();
    
      constructor() {
        // 每秒用随机数刷新股价
        setInterval(() => {
          const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
          this.price = priceQuote.lastPrice;
    
          // 把每秒产生的新数据发送到外部
          this.priceChange.emit(priceQuote);
        }, 1000);
      }
    
      ngOnInit() {
      }
    
    }
    
    export class PriceQuote {
      constructor(public stockCode: string,
                  public lastPrice: number) {
    
      }
    }

**五、在price-quote.component.html 在组件内调用属性测试**

<div>
      这里是股票报价
    </div>
    <div>
      股票代码：{
       {stockCode}}, 股票价格：{
       {price |  number:'2.2-2'}}
    </div>

**六、在app.component.html 在组件外调用属性**

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
    <div>
      外部调用输出属性
    </div>
    <div>
      股票{
       {priceQuote.stockCode}}当前估价为{
       {priceQuote.lastPrice | number: '2.2-2'}}
    </div>

**七、app.component.ts ，接收app.component.html传递过来的事件，赋给本地属性**

export class AppComponent {
      // stock = '';
      priceQuote: PriceQuote = new PriceQuote('', 0);
    
      priceQuoteHandler(event: PriceQuote) {
        this.priceQuote = event;
      }
    }

**八、启动项目，访问localhost:4200测试**