angular 4 中多个组件中的事件捕获

Question

我有一个名为 address 的组件，它多次呈现家庭地址和办公室地址，在更改一个时我想更新另一个，所以我编写了 sharedService 并使用了 eventemmiter。但它捕获的是同一组件而不是另一个组件..我期待 'in Address' 记录两次

@Injectable()
export class SharedService {
  onMainEvent: EventEmitter = new EventEmitter();
}


@Component({ ... })
export class AddressComponent {
  onMain: boolean = false;
  constructor(service: SharedService) {
    service.onMainEvent.subscribe(
      (onMain) => {
        this.onMain = onMain;
        console.log('in Address')
      }
   );
 }
updateAddress(onMain):void {
    this.service.onMainEvent.emit(onMain);
  }

}

Answer 1

您需要将您的服务注入为 singleton:

angular 6 岁及以上

@Injectable({providedIn: 'root'})
   export class SharedService {
     onMainEvent: EventEmitter = new EventEmitter();
   }

较低的：

@NgModule({
  ...
  providers: [UserService],
  ...
})

更优选的做法是使用通量架构，例如 ngrx 或 ngxs angular。

angular 4 中多个组件中的事件捕获

event capture in multiple component in angular 4

angular

angular-forms

angular-event-emitter