Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）

app.component.html 

<app-in-out [in]='"传输进入"' (out)="out($event)" ></app-in-out>

app.component.ts

import { Component } from '@angular/core';
@Component({selector: 'app-root',templateUrl: './app.component.html'
})
export class AppComponent {out($event: any) {alert($event);}
}

in-out/in-out.component.html

<h1>来自父组件的参数：{
   {in}}</h1> 
<button (click)="out.emit('向父组件传参')">向父组件传参</button>

in-out/in-out.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-in-out',templateUrl: './in-out.component.html',styleUrls: ['./in-out.component.css']
})
export class InOutComponent implements OnInit {constructor() { }@Input() in: any = '';//从父组件传入参数进来@Output() out = new EventEmitter;//从子组件传出参数到父组件（采用事件的方式，类似Vue的emit）ngOnInit(): void {  }}

实现效果