Angular 中的 $emit() 和 $broadcast() 的用法-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，$emit() 和 $broadcast() 是两个非常重要的方法，它们可以用来在父子组件之间传递消息，以便进行数据交互。通过这两个方法，我们可以更加灵活地控制组件之间的通信，从而实现更好的组件封装和复用，提高代码的可维护性和可扩展性。

$emit() 方法

$emit() 方法是指向父级作用域广播一个事件，它会沿着作用域树向上传递事件，直到遇到第一个 $on() 方法处理该事件为止。我们可以利用 $emit() 方法从子组件向父组件传递数据，从而实现组件间的通信。

下面是一个示例代码，该代码演示了如何利用 $emit() 方法从子组件向父组件传递数据：

// www.javascriptcn.com code example
// Parent Component
import { Component } from '@angular/core';

@Component({
  selector: 'parent',
  template: `<child (messageSent)="onMessageReceived($event)"></child>`
})
export class ParentComponent {
  onMessageReceived(message: any) {
    console.log(message);
  }
}

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

@Component({
  selector: 'child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageSent = new EventEmitter<any>();

  sendMessage() {
    this.messageSent.emit('Hello world!');
  }
}

在上面的示例代码中，我们定义了一个父组件 ParentComponent 和一个子组件 ChildComponent，并将子组件作为父组件的模板中的一个标签引入。同时，我们在子组件中定义了一个名为 messageSent 的输出属性，它会向父组件广播一个事件，同时向父组件传递一个数据 Hello world!。当子组件的按钮被点击时，它会调用 sendMessage() 方法，该方法会触发 messageSent 事件，并将数据传递给它。在父组件模板中，我们将 messageSent 事件绑定到一个名为 onMessageReceived() 的方法上，以便在接收到子组件的消息时进行处理。

$broadcast() 方法

$broadcast() 方法是指向所有子作用域广播一个事件，它会沿着作用域树向下传递事件，直到触及所有子作用域为止。我们可以利用 $broadcast() 方法从父组件向所有子组件广播一个事件，从而实现多个组件之间的通信。

下面是一个示例代码，该代码演示了如何利用 $broadcast() 方法从父组件向所有子组件广播一个事件：

// www.javascriptcn.com code example
// Parent Component
import { Component } from '@angular/core';

@Component({
  selector: 'parent',
  template: `<child></child>`
})
export class ParentComponent {
  broadcastMessage() {
    this.$scope.$broadcast('messageBroadcasted', { data: 'Hello world!' });
  }
}

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

@Component({
  selector: 'child',
  template: `<div>{{ message }}</div>`
})
export class ChildComponent {
  private message: string;

  constructor(private $rootScope: any, private $scope: any) {
    this.$rootScope.$on('messageBroadcasted', (event: any, args: any) => {
      this.message = args.data;
    });
  }
}

在上面的示例代码中，我们定义了一个父组件 ParentComponent 和一个子组件 ChildComponent，并在父组件中定义了一个 broadcastMessage() 方法，它会广播一个名为 messageBroadcasted 的事件，并将数据 { data: 'Hello world!' } 传递给它。在子组件中，我们利用 $rootScope 和 $scope 两个服务，注册了一个名为 messageBroadcasted 的事件处理程序，并将该事件处理程序绑定到 messageBroadcasted 事件上。当 messageBroadcasted 事件被广播时，该事件处理程序会接收到事件和数据对象，并将数据对象中的 data 字段赋值给该组件中的 message 属性。在子组件的模板中，我们通过 {{ message }} 语法将 message 属性渲染到页面上。

学习和指导意义

$emit() 和 $broadcast() 方法是 Angular 中非常基础、但也非常重要的两个方法。它们的作用不仅限于实现组件之间的通信，还可以用于实现更为复杂的业务逻辑。例如，我们可以利用这两个方法实现多个组件之间的同步，实现多级组件之间的数据传递，实现数据的双向绑定、事件的委托等等。

因此，熟练掌握并灵活应用 $emit() 和 $broadcast() 方法对于 Angular 开发来说是非常重要的。同时，我们也需要注意，在使用这两个方法时要遵循一些最佳实践，例如，在代码中尽量减少对 $rootScope 的使用，避免事件滥用等等。只有通过不断学习、实践，并结合自己的经验，才能更好地掌握这两个方法的用法，并在实际开发中将其发挥出最大的作用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c71ccfcc0f7239cdebab30

Angular 中的 $emit() 和 $broadcast() 的用法

$emit() 方法

$broadcast() 方法

学习和指导意义

接着读