angular--输入输出属性

有父子关系的两个组件：parent、child

• @Input()：输入属性，，在父组件通过属性绑定，传递数据到子组件（父=》子）
• @Output()：输出属性，在父组件通过绑定事件，把子组件中的数据传递到父组件（子=》父）

输入属性

child：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { Data } from '@angular/router/src/config';
@Component({
  selector: 'app-test-demo',
  templateUrl: './test-demo.component.html',
  styleUrls: ['./test-demo.component.css']
})
export class TestDemoComponent implements OnInit {
  @Input()
  public stock: string;

  @Input()
  public amount: number;

  constructor() {
   }

  ngOnInit() {
  }

}

界面：
    <p>stock值:{{stock}}</p>
    <p>amount值:{{amount}}</p>


parent：在父组件通过属性绑定，把值传递到子组件。
<app-test-demo [stock]="title" [amount]="100" ></app-test-demo>

输出属性

child:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { Data } from '@angular/router/src/config';
@Component({
  selector: 'app-test-demo',
  templateUrl: './test-demo.component.html',
  styleUrls: ['./test-demo.component.css']
})
export class TestDemoComponent implements OnInit {

  @Output()
  lastPrice: EventEmitter<Myprice> = new EventEmitter(); // EventEmitter需要指定类型

  @Output()
  myss: EventEmitter<number> = new EventEmitter();

  constructor() {
    setInterval(() => {
     let tt: Myprice = new Myprice("QQ", 100 * Math.random());
     let n: number = tt.price;

     this.lastPrice.emit(tt); // 通过EventEmitter 的 emit方法，向父组件传递一个对象

     this.myss.emit(n); // 向父组件传递通过值

    }, 1000);
   }

  ngOnInit() {
  }

}

export class Myprice { // 定义一个对象
  constructor(
    public stock: string,
    public price: number) { }
}

parent：
界面： (myss) = "getValNum($event)" 中 方法的参数$event，是从子组件传递过来的值，父组件通过一个方法接收这个值
<app-test-demo (myss) = "getValNum($event)"></app-test-demo>
<div>数字：{{n | number:'2.2-2'}}</div>

<app-test-demo (lastPrice) = "getVal($event)"></app-test-demo>
<div>对象：{{ss.price | number:'2.2-2'}}</div>

ts:
import { Component } from '@angular/core';
import * as $ from '_jquery@3.2.1@jquery';
import { Myprice } from './test-demo/test-demo.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public ss: Myprice = new Myprice("", 0);
  public n: number;

  getVal(val: Myprice) {
    this.ss = val;
  }
  getValNum(val: number) {
    this.n = val;
  }
  
}

image.png