Angular 抽象事件处理 class

Question

I have Component1 and Component2 which are extended from AbstractComponent. I need to listen for an event in AbstractComponent. However, when a event is emitted, handle method on AbstractComponent is called twice. I think it is because it has two implementers which are Component1 and Component2.

How can I prevent handling twice for the same event in AbstractComponent?

@Component({
  selector: 'FirstLogComponent'
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FirstLogComponent extends AbstractLogComponent {

  public constructor(
    public logService: LogService,
  ) {
    super(logService);
  }

}


import { LogService } from "../../../../../../../core/services/log.service";


@Component({
  selector: 'SecondLogComponent'
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SecondLogComponent extends AbstractLogComponent {

  public constructor(
    public logService: LogService,
  ) {
    super(logService);
  }

}



import { OnInit } from '@angular/core';
import { ReactiveComponent } from '../../ReactiveComponenet';
import { take as rxTake } from 'rxjs/internal/operators';
import { takeUntil as rxTakeUntil } from 'rxjs/internal/operators';


export abstract class AbstractLogComponent extends ReactiveComponent implements OnInit {

  public constructor(public logService) {
    super();

  }

  public ngOnInit() {
    this.logService.emitLog.pipe(rxTakeUntil(this.destroyed$))
    .subscribe((log) => {
        console.log(log)
      }
  }
}

So I see 2 log instead of 1 since emitLog is emitted only once.

Answer 1

Both implementers inherit ngOnInit, so assuming they are both being rendered it is expected that emitLog is called twice.

In other words, your trigger for emitting log is the on-init lifecycle hook.

If you want it to be called once, all you have to do is to find the appropriate trigger that meets your requirements, eg clicking any of the components.