如何从 AngularJS 应用程序中使用的 Angular 组件传递数据？

Question

用例： 我在 AngularJS 应用程序中使用了一个 Angular 组件。该组件将：

• 发送将编辑 AngularJS 父页面某些方面的 API 调用

API 调用成功后，需要重新加载父页面（在 AngularJS 中）以反映这些更改。

我一直在从 Angular 组件发出一个事件，应该在 AngularJS 应用程序中捕获该事件以相应地重新加载父页面。我尝试使用

EventEmitter

来实现这一点来发出事件。

在 Angular 组件中

export class customComponent {
  @Output() customEvent = new EventEmitter<string>();

  emitEvent() {
    this.customEvent.emit('someText');
  }
}

<button (click)="emitEvent()">
Emit Event
</button>

在 AngularJS 父页面控制器中

$rootScope.$on('customEvent', (event, data) => {
      console.log(event, data);
    });

<custom-component></custom-component>

我还尝试使用 $scope 捕获事件，但这也没有成功。

这里有什么遗漏吗？

Answer 1

从 Angular 组件发出事件并在 AngularJS 父页面中侦听它似乎是在正确的轨道上。但是，有几点需要牢记：

确保当 API 调用成功时，您实际上是从 Angular 组件发出事件。您可以通过在 API 调用的回调函数中调用 emitEvent() 方法来执行此操作。

在您的 AngularJS 父页面中，确保您正在使用与发出事件相同的名称监听事件。在您的情况下，这将是“customEvent”。另外，确保监听器被添加到 $rootScope 而不仅仅是 $scope。

试试这个：

成分：

export class customComponent {
  @Output() customEvent = new EventEmitter<string>();

  emitEvent() {
    // Make API call here
    apiCall().subscribe(response => {
      // Emit event when API call is successful
      this.customEvent.emit('someText');
    });
  }
}

<button (click)="emitEvent()">
Emit Event
</button>

父页面控制器：

$rootScope.$on('customEvent', (event, data) => {
  console.log(event, data);
  // Reload parent page here
  location.reload();
});

<custom-component></custom-component>