角度4中的多个组件中的事件捕获答案

【问题标题】：event capture in multiple component in angular 4角度4中的多个组件中的事件捕获
【发布时间】：2019-04-16 11:47:00
【问题描述】：

我有一个名为地址的组件，它多次呈现家庭地址和办公室地址，在更改一个我想更新另一个时，我已经编写了 sharedService 并使用了 eventemmiter。但它捕获的是同一组件而不是另一个..我期待“地址”日志两次

@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);
  }

}

【问题讨论】：

stacklitz.com 上的minimal, complete, verifiable repro 将帮助我们更快地调试此问题。

标签： angular angular-forms angular-event-emitter

【解决方案1】：

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

对于角度 6 及以上

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

对于较低的：

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

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

【讨论】：

制作服务单例，它对我有用，谢谢！！