@Input

在子组件中

子组件类

import { Component, Input } from '@angular/core';
@Input() item: string; // 使用@Input装饰item属性，用来从父组件中接收数据到item中

子组件模板

// 在子组件模板中显示从父组件获取的数据
{{item}}

在父组件中

父组件模板

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

父组件类

export class AppComponent {
    // 设置向子组件传输的数据
  currentItem = 'Television';
}

@Output

在子组件中

子组件模板

<input type="text" #newItem/>
// 将输入栏的值作为参数，绑定到button的click事件
<button (click)="setItem(newItem.value)">确定</button>

子组件类

import { Output, EventEmitter } from '@angular/core';
// 使用@Output装饰器将newItemEvent暴露到父组件中
@Output() newItemEvent = new EventEmitter<string>();
setItem(value: string): void{
  this.newItemEvent.emit(value);
}

在父组件中

父组件模板

{{value}}
<app-child1 (newItemEvent)="changeValue($event)"></app-child1>

父组件类

value: string;
changeValue(value: string): void{
  this.value = value;
  console.log(value);
}