Angular中的輸入輸出是通過注解@Input和@Output來標識，它位于組件控制器的屬性上方。
輸入輸出針對的對象是父子組件。

@Input和@Output這兩個要結合父組件與子組件來說

@Input 是 屬相綁定，父組件向子組件傳遞數據

@Output是 事件綁定，子組件向父組件傳遞數據同時觸發事件

• 
  

child.component.html<div> <p>寵物名稱：{{stockName}}</p> <p>當前價格：{{stockPrice | number:'2.1-2'}}</p></div>復制代碼child.component.ts復制代碼

import {Component, OnInit, Input, EventEmitter, Output} from '@angular/core';import {StockInfo} from '../models/stockInfo'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: [ './child.component.scss' ]})export class ChildComponent implements OnInit {@Input() stockName: string; stockPrice: number;@Output() event: EventEmitter<StockInfo> = new EventEmitter();constructor() { }ngOnInit() { setInterval(() => { const stock: StockInfo = new StockInfo(this.stockName, 100 * Math.random()); this.stockPrice = stock.price; this.event.emit(stock); }, 3000); }}復制代碼

stockInfo.ts

export class StockInfo { constructor( public name: string, public price: number ) { this.name = name; this.price = price; }}復制代碼

parent.component.html

<input placeholder="請輸入寵物名稱" [(ngModel)]="keyWord"><div> <p>寵物名稱：{{keyWord}}</p> <p>當前價格：{{currentPrice | number:'2.1-2'}}</p></div><hr><app-child [stockName]="keyWord" (event)="eventHandler($event)"></app-child>復制代碼

parent.component.ts

import {StockInfo} from '../models/stockInfo';export class ParentComponent implements OnInit { keyWord: string; currentPrice: number; eventHandler(stock: StockInfo) { this.currentPrice = stock.price; }}復制代碼

轉載于:https://juejin.im/post/5c7899c9518825767633d889

總結

以上是生活随笔為你收集整理的angular input和output的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。