有父子關(guān)系的兩個組件：parent给赞、child
- @Input()：輸入屬性洼裤，冒滩，在父組件通過屬性綁定，傳遞數(shù)據(jù)到子組件（父=》子）
- @Output()：輸出屬性沉迹，在父組件通過綁定事件睦疫，把子組件中的數(shù)據(jù)傳遞到父組件（子=》父）
輸入屬性
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)" 中 方法的參數(shù)$event，是從子組件傳遞過來的值葫松，父組件通過一個方法接收這個值
<app-test-demo (myss) = "getValNum($event)"></app-test-demo>
<div>數(shù)字：{{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
