angular input接收不到值_Angular @Input和@Output注解使用方法介绍
时间: 2024-01-14 20:04:15 浏览: 220
Angular 2父子组件数据传递之@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');
}
}
```
这样就实现了子组件向父组件传递数据的功能。
阅读全文