所谓组件的输入与输出，其实就是给组件传值或者组件往外传值。类似于父组件向子组件传值或者子组件回调父组件的方法（也可以回调传值）。angular在模板上，通过[]实现组件的输入，()实现组件的输出。

组件的输入

比如有一个test的组件，其中有一个name属性，我们需要通过app组件将name传递给test组件。

方式一：通过@Input()注解

@Input()注解适合数据比较少的情况。
首先，我们需要在TestComponent类中增加一个name属性，然后导入Input，然后在name属性前增加@Input()注解。

import { Component, EventEmitter, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  @Input('newName') name: string;

  constructor() {
    this.name = ""
  }

  ngOnInit(): void {
  }

}

@Input('newName')中的newName代表我们起的一个别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。
然后我们在模板文件test.component.html增加输出，以便测试值是否传递。

<p>{{name}}</p>

我们在app.component.html中调用app-test组件，并通过[]传值。

<app-test [newName]='"test"'></app-test>

测试

方式二：通过Inputs[]配置项

首先，我们需要在TestComponent类中增加一个name属性，然后在@Component注解中，增加Inputs[]配置项。

import { Component, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  inputs: ['name:newName']
})
export class TestComponent implements OnInit {

  name: string;

  constructor() {
    this.name = ""
  }

  ngOnInit(): void {
  }

}

inputs: ['name:newName']中，name代表当前类的属性，冒号后面的newName代表别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。
然后我们在模板文件test.component.html增加输出，以便测试值是否传递。

<p>{{name}}</p>

我们在app.component.html中调用app-test组件，并通过[]传值。

<app-test [newName]='"test"'></app-test>

组件的输出

angular中通过()实现组件的输出。
比如我们在app-test组件中，定义了一个like方法，此方法执行时，回调父组件的ringWasPlace方法，并传递一个字符串。
在app.component.ts代码如下

import { Component, EventEmitter, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  outputs: ['putRingOnIt']
})
export class TestComponent implements OnInit {

  putRingOnIt: EventEmitter<string>

  @Input('newName') name: string;

  constructor() {
    this.name = ""
    this.putRingOnIt = new EventEmitter();
  }

  ngOnInit(): void {
  }

  liked(): void {
    this.putRingOnIt.emit('oh oh oh')
  }

}

父组件模板文件app.component.html

<app-test [newName]='"test"' (putRingOnIt)="ringWasPlace($event)"></app-test>
<h1>
    {{message}}
</h1>

父组件类app.component.ts如下

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  message: string;

  constructor() {
    this.message = ""
  }

  ringWasPlace(message: string):void {
    this.message = message;
  }

}

测试，点击一下like按钮，看到输出如下