angular组件传值

小总结：无论是父传子的@Input 装饰器，还是子传父@Output装饰器，都定义在子组件实例中。

父传子@Input
先贴个官网的图片：

子组件实例

import { Component, Input } from '@angular/core'; // First, import Input
export class ChildItemComponent {
  @Input() item: string; // decorate the property with @Input()
}

子组件模板

<div>{{item}}</div>

父组件模板

<child-item [item]="currentItem"></child-item>

父组件实例

export class AppComponent {
  currentItem = 'aaa';
}

这样，子组件就拿到了父组件中的currentItem值，@Input属性的变化可以用生命周期钩子OnChanges监听。

子传父@output
子组件模板

<input #newItem></input>
<button (click)='addNewItem(newItem.value)'>添加</button>

子组件实例

export class ChildItemComponent {
  @Output() newItemEvent = new EventEmitter<string>();
  addNewItem(value: string){
      this.newItemEvent.emit(value)
  }
}

父组件模板

<child-item (newItemEvent)="addItem($event)"></child-item>

父组件实例

export class AppComponent {
  list=['item1','item2','item3'] 
  addItem(evt:string){
      this.list.push(evt)
  }
}

同时使用 @Input() 和 @Output()