在Angular的属性绑定中传递方法与@Output()和EventEmitter有什么区别?

假设在Angular中有一对父子组件，如下所示:

子组件类:

export class ChildComponent {
@Input() addTask:any;
}

子组件模板:

<button (click)="addTask('cleaning')">Add Task</button>

父组件类:

export class ParentComponent {
newTask:string;
add(task:string){
this.newTask = task;
}
}

父组件模板:

<div>
<app-child [addTask]="add.bind(this)"></app-child>
</div>

在这里，我通过使用属性绑定将父方法传递给子方法，将字符串从子方法传递给父方法。我读到，只要这种方法没有副作用，这是可以的。假设我的方法没有任何副作用。但我的问题是，它和使用@Output()和EventEmitter有什么不同?上述功能可以使用@Output()和EventEmitter重写，如下所示:

子组件类:

export class ChildComponent {
@Output() newEvent = new EventEmitter<string>();

addTask(task:string){
this.newEvent.emit(task);
}
}

子组件模板:

<button (click)="addTask('cleaning')">Add Task</button>

父组件类:

export class ParentComponent {
newTask:string;
add(task:string){
this.newTask = task;
}
}

父组件模板:

<div>
<app-child (newEvent)="add($event)"></app-child>
</div>

这两种方法都做同样的事情。请让我知道这两种方法之间的区别，假设我的方法没有任何副作用。我也想知道哪种方法更好，为什么。

父/子

app.component.html

<div>
<!-- newTask is a variable which is passing through @Input parameter task-->
<app-child [task]="newTask" (newEvent)="add($event)"></app-child>
</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
newTask: string;
constructor() {
this.newTask = 'build';
}
add(task: string) {
this.newTask = task;
console.log('newTask => ', this.newTask);
}
}

child.component.ts

import {
Component,
SimpleChanges,
OnChanges,
Input,
Output,
EventEmitter,
} from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="addTask('cleaning')">Add Task</button>
`,
})
export class ChildComponent implements OnChanges {
@Input() task: any;
@Output() newEvent = new EventEmitter<string>();
constructor() {}
ngOnChanges(changes: SimpleChanges) {
console.log('task => ', this.task);
}
addTask(task: string) {
this.newEvent.emit(task);
}
}

在Angular中，在属性绑定中传递方法允许组件将父组件中定义的方法的引用传递给它的一个子组件。这可以使用父模板中的方括号语法和子组件类中相应的输入属性来实现。

另一方面，Angular中的@Output()和EventEmitter为子组件向父组件发射事件提供了一种方式。这可以通过在子组件类中使用@Output()装饰器定义事件属性，并使用EventEmitter类发出事件来实现。

这两种方法的主要区别在于，带有方法引用的属性绑定是从父组件到子组件的单向通信，而@Output()和EventEmitter为子组件提供了一种向父组件发射事件的方式。这使得@Output()和EventEmitter成为Angular应用程序中更灵活、更强大的事件处理机制，因为它允许组件之间的双向通信。

@Input()

默认情况下，组件的所有属性只能在这些组件内部访问。
使用@Input()装饰器，我们可以将属性公开给所有其他父组件。这就是我们如何在属性绑定中使用组件属性。

@Output ()

要将数据从子组件传递到父组件，我们需要使用事件发射器。事件发射器是一个允许我们发射事件的对象。
父组件所做的是，每当一个新事件被发出时，父组件就知道并对该事件做出反应。这也被称为自定义事件绑定。

相关内容

最新更新

热门标签：