如何在angular中使用@input/@output在组件之间共享数据？

在Angular中，可以使用@Input和@Output装饰器来实现组件之间的数据共享。

@Input装饰器用于将数据从父组件传递到子组件。在父组件中，通过将数据绑定到子组件的属性上，将数据传递给子组件。在子组件中，使用@Input装饰器来接收父组件传递的数据，并在组件内部使用。

下面是一个示例：

父组件中的模板：

<app-child [data]="parentData"></app-child>

父组件中的代码：

export class ParentComponent {
  parentData: string = "Hello from parent";

  constructor() { }
}

子组件中的代码：

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

@Component({
  selector: 'app-child',
  template: '<p>{{ childData }}</p>'
})
export class ChildComponent {
  @Input() data: string;
  childData: string;

  constructor() {
    this.childData = this.data;
  }
}

在上面的示例中，父组件通过将parentData绑定到子组件的data属性上，将数据传递给子组件。子组件使用@Input装饰器来接收父组件传递的数据，并将其赋值给childData属性。在子组件的模板中，可以使用childData来显示父组件传递的数据。

@Output装饰器用于将数据从子组件传递到父组件。在子组件中，通过创建一个EventEmitter实例，并使用@Output装饰器将其暴露给父组件。在子组件中，可以使用EventEmitter的emit方法触发事件，并将数据传递给父组件。在父组件中，通过监听子组件的事件来接收子组件传递的数据。

下面是一个示例：

子组件中的代码：

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

@Component({
  selector: 'app-child',
  template: '<button (click)="sendData()">Send Data</button>'
})
export class ChildComponent {
  @Output() dataEvent: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  sendData() {
    const data: string = "Hello from child";
    this.dataEvent.emit(data);
  }
}

父组件中的代码：

export class ParentComponent {
  receivedData: string;

  constructor() { }

  receiveData(data: string) {
    this.receivedData = data;
  }
}

在上面的示例中，子组件中创建了一个名为dataEvent的EventEmitter实例，并使用@Output装饰器将其暴露给父组件。在子组件的sendData方法中，通过调用dataEvent的emit方法触发事件，并将数据传递给父组件。父组件中定义了一个receiveData方法来接收子组件传递的数据，并将其赋值给receivedData属性。在父组件的模板中，可以通过监听子组件的dataEvent事件来调用receiveData方法，并接收子组件传递的数据。

这样，就可以在Angular中使用@Input和@Output来实现组件之间的数据共享。