9.《Angular输入输出属性》

一、输入属性

代码示例

首先使用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>