Angular中@Input@Output

@Input

在Angular中，@Input装饰器用于定义一个输入属性。输入属性允许父组件向子组件传递数据。通过使用@Input装饰器，你可以将一个属性标记为可由外部传入的属性，并在子组件中使用。

要使用@Input装饰器，需要遵循以下步骤：

1. 首先，在子组件的类中导入@Input装饰器：

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

2. 然后，在子组件的属性上应用@Input装饰器。例如，假设你有一个名为name的输入属性：

@Input() name: string;

3. 现在，父组件可以通过绑定方式将值传递给子组件的name属性。在父组件的模板中，使用方括号语法进行绑定。例如：

<app-child [name]="parentName"></app-child>

其中，parentName是父组件中的属性。

4. 最后，在子组件中，你可以使用name属性来访问从父组件传递过来的值。例如，在子组件的模板中显示该值：

<p>Hello, {{ name }}!</p>

这样，子组件就可以接收来自父组件的输入数据，并在模板中使用它们。

需要注意的是，@Input属性不仅可以接收简单的数据类型（如字符串、数字等），还可以接收复杂的对象类型，甚至其他组件。

@Output

在Angular中，@Output装饰器用于定义一个输出属性。输出属性允许子组件向父组件传递数据。通过使用@Output装饰器，你可以将一个属性标记为可由子组件触发事件并将数据传递给父组件。

要使用@Output装饰器，需要遵循以下步骤：

1. 首先，在子组件的类中导入@Output装饰器和EventEmitter：

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

2. 然后，在子组件中创建一个新的EventEmitter实例，并使用@Output装饰器将其绑定到要暴露给父组件的属性上。例如，假设你有一个名为messageEvent的输出属性：

@Output() messageEvent = new EventEmitter<string>();

这里的string是指事件将传递的数据类型。

3. 在子组件中，当需要触发输出事件时，调用emit()方法并传递要传递给父组件的数据。

sendMessage() {
  this.messageEvent.emit('Hello from child component!');
}

4. 在父组件的模板中，使用子组件的标签并监听事件。当子组件触发输出事件时，调用父组件中的方法来处理数据。例如：

<app-child (messageEvent)="receiveMessage($event)"></app-child>

其中，receiveMessage()是父组件中用于处理接收到的数据的方法。

5. 最后，在父组件中，实现处理接收到的数据的方法：

receiveMessage(message: string) {
  console.log(message); // 输出：Hello from child component!
  // 处理接收到的数据...
}

这样，子组件就可以通过触发输出事件来向父组件传递数据。

需要注意的是，@Output属性必须是一个EventEmitter实例，并且可以携带不同的数据类型。在父组件中，通过在事件绑定中使用$event来访问传递的数据。