如何在Angular中重现Angular JS .broadcast()/.on()行为? [英] How can I reproduce the Angular JS .broadcast() / .on() behaviour in Angular?

问题描述

我正在用Angular8重写AngularJS应用程序.我已经阅读了组件之间进行通信的不同方法，但是鉴于我目前的需求，似乎无法找到实现此目标的正确方法.

I'm working on rewriting an AngularJS application in Angular8. I have read of the different ways to communicate between components but can't seem to find the proper way to achieve this given my current requirements.

我目前有2个兄弟组件，它们都使用处理基本Crud功能的通用服务.表单组件调用服务中的create方法，而列表组件调用fetch方法.

I currently have 2 sibling components which both use a common service that handles basic crud functionality. The form component calls a create method in the service and the list component calls a fetch method.

<page-component>
  <form component></form component>
  <list-component></list-component>
</page-component>

在AngularJS中，这可以通过使用 $ scope.broadcast()和 $ scope.on()来实现，这正是我想要的效果复制.

In AngularJS this would have been achieved by using a $scope.broadcast() and $scope.on() which is the effect that I'm looking to reproduce.

我想弄清楚的是表单组件发出事件的最佳方式，列表组件会(我认为)向事件发出通知以刷新自身.

What I'm trying to figure out is the best way for the form component to emit an event to which the list component would (i assume) subscribe in order to tell it to refresh itself.

需要明确的是，我不想将更新后的值传递给列表组件.我只想简单地通知它，它的数据集已经更新，并且需要重新获取其记录.

我尝试在表单组件中使用@Output:

I have tried using an @Output in my form component:

export class FormComponent implements OnInit {

   @Output() valueChange = new EventEmitter();

   onUpdate() { 
     this.valueChange.emit(true);
   }
...
}

但是我对如何实现事件监听器感到困惑，因为我阅读的所有文档似乎都指向父母和孩子之间传递的事件，而不是指向同级的兄弟姐妹.同样，我所看到的所有示例似乎都集中在将实际数据传递给组件上，而不是像我所要求的那样简单地让它监视事件并自行完成工作.

But I'm confused on how to implement the event listener as all the documentation I have read seems to point to events passed between parents and children and not to siblings as it were. Also the examples I have seen all seem to be focused on passing the actual data to the component instead of simply having it watch for an event and do the work on its own, as I require.

我还看到了使用 @Input 的方法，这些方法要求在声明时将参数传递给它们.我以某种方式认为这些组件应该能够独立工作，而不是依赖于此.

I have also seen methods that use @Input which require parameters to be passed into them on declaration. Somehow I feel that these components should be able to work on their own and not depend on this.

推荐答案

我相信有多种方法可以实现这一目标.

I believe there are multiple ways to achieve this.

对于不相关的组件(例如同级组件)，一种方法是使用

In case of unrelated components, like the sibling components, one method would be to use a Subject Observable of RxJS module in the common service to which Form component will push a new value that can be subscribed to by the List component.

服务:

import { Subject } from 'rxjs/Subject';

@Injectable()
export class SampleService {
  public triggerSource = new Subject<boolean>();
  public trigger$ = this.triggerSource.asObservable();
}

表单组件:

import { SampleService } from '../services/sample.service';

@Component({
  selector: 'form-component',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
  constructor(private _sampleService: SampleService) {
  }

  private setTriggerState(state: boolean) {
    this._sampleService.triggerSource.next(state);
  }
}

列表组件:

import { SampleService } from '../services/sample.service';

@Component({
  selector: 'list-component',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
})
export class ListComponent implements OnInit {
  constructor(private _sampleService: SampleService) {
    this._sampleService.trigger$.subscribe(value => {
      if (value) {
         // value is true (refresh?)
      } else {
         // value is false (don't refresh?)
      }
    });
  }
}

由于我们返回的是Observable，因此有众多运算符可以优化数据外流.例如，在您的情况下，可以使用运算符 distinctUntilChanged()避免推送冗余信息.那么可观察者的声明将是

And since we are returning an Observable, there are numerous operators to refine the outflow of data. For eg., in your case operator distinctUntilChanged() can be used to avoid pushing redundant information. Then the declaration of the observable would be

public trigger$ = this.triggerSource.asObservable().distinctUntilChanged();

这篇关于如何在Angular中重现Angular JS .broadcast()/.on()行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！