首页 文章

角度服务中的EventEmitter或RxJS主题

提问于
浏览
3
  • EventEmitter是否为RxJS Observable?

  • 在角度文档中,它解释了如何使用EventEmitter从子组件到父组件进行通信 . 我们应该只在组件中使用EventEmitter还是可以使用角度服务?

  • 在角度文档中,它解释了父和子如何通过使用observables RxJS Subject的共享服务进行通信 . 我们可以在此MissionService示例中使用EventEmitter而不是RxJS Subject吗?如果我们可以在服务中使用EventEmitter,请帮助将此示例与EventEmitter一起转换 . 我是棱角分明的新手 .

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

阅读这些相关帖子后我有点困惑:

2 回答

  • -1

    有许多不同的方法来处理事件场景 .

    EventEmitter是将子事件传递给父级的最常用方法 . 假设您创建了一个子组件并在那里单击了一个按钮,您可能希望在父组件中单击该事件:

    <button (click)="clickEmitter.emit()">button</button>

    <child-component (clickEmitter)="buttonClicked()"></child-component>
    

    共享服务(Injectable)可用于存储多个组件的数据 .

    Subject和BehaviorSubject可用于在组件之间共享事件(有时通过共享服务) . 例如:我使用了一个带有用户BehaviorSubject的authService来获取每个组件中的登录用户对象 .

    这些只是许多其他用例中的一些简单示例 .

  • 1

    EventEmiter从RxJs主题扩展而来,你可以将它用作Observable .

    Angular sources

    export declare class EventEmitter<T> extends Subject<T> {
          __isAsync: boolean;
          constructor(isAsync?: boolean);
          emit(value?: T): void;
          subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
        }
    

    在父组件和子组件之间共享数据的最佳做法是使用@Input和@Output

    当您需要使用服务进行共享时 . 您需要使用Subject或BehaviorSubject

    service example

    @Injectable()
    export class MyService {
      private data: BehaviorSubject<MyData> = new BehaviorSubject(null);
    
      getData(): Observable<MyData> {
        return this.data;
      }
    
      setData(d: MyData): void {
        this.data.next(d);
      }
    }
    

    use in component

    data: Observable<MyData>;
    
    constructor(private myService: MyService) {}
    
    ngOnInit() {
       this.data = this.myService.getData();
    }
    

    use in template

    <div>{{data|async}}</div>
    

相关问题