一、输入属性
代码示例
首先使用Angular CLI新建一个项目
ng new demo1
新建一个order组件
ng g component order
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OrderComponent } from './order/order.component';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
OrderComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//父组件
//app.component.html
<h1>
我是主组件：
<input type="text" [(ngModel)]="ID" placeholder="请输入ID">
<input type="number" [(ngModel)]="Mount" placeholder="请输入数量">
</h1>
<div style="border-top: 1px solid #000;">
<app-order [orderId]="ID" [orderMount]="Mount"></app-order>
</div>
//app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ID: string;
Mount: number;
}
//子组件
//order.component.html
<h2>
我是子组件
</h2>
<h4>
商品ID：{{orderId}}
</h4>
<h4>
商品数量：{{orderMount}}
</h4>
//order.component.ts
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
@Input()
orderId: string;
@Input()
orderMount: number;
constructor() {
}
ngOnInit() {
}
}
效果一.png
父组件通过
属性绑定（如[orderId]="ID"）将ID值传入子组件`，子组件通过@Input()接收传过来的值，这个是单项的数据流动，改变子组件的值并不会影响父组件中的值。
修改子组件，使其每隔3秒初始化orderId为resetOrderId
//
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
@Input()
orderId: string;
@Input()
orderMount: number;
constructor() {
}
ngOnInit() {
setInterval(() => {
this.orderId = 'resetOrderId';
}, 3000);
}
}
效果二.png
如图子组件的值改变，不会影响到父组件中的值（1007）。
输入属性用于给有父子关系的组件进行传值，并且是单向的，对比区别路由参数的传值
二、输出属性
新建一个price组件
ng g price
代码示例
//子组件
//price.component.html
<div style="border-top: 1px solid #000">
<h2>这里是价格组件</h2>
<div>
商品id:{{id}}
商品价格：{{price|number:'2.2-2'}}
</div>
</div>
//price.component.ts
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-price',
templateUrl: './price.component.html',
styleUrls: ['./price.component.css']
})
export class PriceComponent implements OnInit {
id: string = 'product1';
price: number;
@Output()
lastPrice: EventEmitter<PriceRandom> = new EventEmitter();
//EventEmitter后面的<PriceRandom>这个范型代表的是发射出去值的类型，这里是PriceRandom
constructor() {
setInterval(() => {
let priceRandom: PriceRandom = new PriceRandom(this.id, 100 * Math.random());
this.price = priceRandom.lastPrice;
this.lastPrice.emit(priceRandom);
}, 2000);
}
ngOnInit() {
}
}
export class PriceRandom {
constructor(public id: string,
public lastPrice: number) {
}
}
子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。
子组件的 EventEmitter属性是一个输出属性，通常带有@Output 装饰器
//父组件
//app.component.html
<h1>
我是主组件
</h1>
<div>
商品ID：{{priceRandom.id}}
商品价格：{{priceRandom.lastPrice|number:'2.2-2'}}
</div>
<div>
<app-price (lastPrice)="priceRandomHandle($event)"></app-price>
</div>
//app.component.ts
import {Component} from '@angular/core';
import {PriceRandom} from './price/price.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// ID: string;
// Mount: number;
priceRandom: PriceRandom = new PriceRandom('', 0);
priceRandomHandle(event: PriceRandom) {
this.priceRandom = event;
}
}
初始效果.png
运行效果.png
效果：2s之后，子组件价格改变，同时父组件价格改变，这里用了number管道
我们还可以修改事件的名称，只需修改@output装饰器
//子组件
@Output('priceChange')
lastPrice: EventEmitter<PriceRandom> = new EventEmitter();
//父组件
<app-price (priceChange)="priceRandomHandle($event)"></app-price>
