angular input接收不到值_Angular @Input和@Output注解使用方法介绍

Angular中的@Input和@Output是用来实现组件之间通信的注解。

@Input用来接收父组件传递过来的数据，而@Output则用来向父组件传递数据。

下面是它们的使用方法：

1. @Input

在子组件中使用@Input注解来接收父组件传递的数据。例如：

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

@Component({
  selector: 'child-component',
  template: `
    <div>{{data}}</div>
  `
})
export class ChildComponent {
  @Input() data: string;
}

在父组件中使用属性绑定的方式将数据传递给子组件。例如：

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component [data]="myData"></child-component>
  `
})
export class ParentComponent {
  myData = 'Hello world';
}

2. @Output

在子组件中使用@Output注解来定义一个事件。例如：

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

@Component({
  selector: 'child-component',
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
export class ChildComponent {
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

在父组件中使用事件绑定的方式监听子组件的事件。例如：

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component (clicked)="onChildClicked()"></child-component>
  `
})
export class ParentComponent {
  onChildClicked() {
    console.log('Child component clicked');
  }
}

这样就实现了子组件向父组件传递数据的功能。