有父子关系的两个组件: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
网友评论