Определение порядка событий для события @HostListener в директиве angular

Question

У меня есть приложение Angular 9 с родительским компонентом, которое содержит дочерний компонент (назовем его «обзор»), содержащий кнопку. При нажатии кнопки дочерний компонент генерирует событие, которое перехватывается родительским компонентом для замены дочернего компонента другим компонентом (назовем его «деталь»).

Кнопка в «обзоре» -component имеет директиву с @HostListener для захвата нажатий кнопок. Моя проблема в том, что этот слушатель никогда не выполняется, потому что, очевидно, когда дочерний компонент заменяется, Angular не ждет, пока будут выполнены слушатели щелчка в директиве.

Есть ли способ принудительно Angular для выполнения прослушивателя кликов, определенного с помощью @HostListener в директиве перед прослушивателем кликов, определенным в самом компоненте?

Пример кода:

Parent компонент

<!-- parent.component.html -->
<div>
  <overview *ngIf="currentStep == cardStep.OVERVIEW"
            (proceedToDetailView)="currentStep = cardStep.DETAIL"
  ></overview>
  <detail *ngIf="currentStep == cardStep.DETAIL"></detail>
</div>

// parent.component.ts

export enum CardStep {
  OVERVIEW = 'OVERVIEW',
  DETAIL= 'DETAIL',
}

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  currentStep = CardStep.OVERVIEW;
  cardStep = CardStep;
}

Обзор компонент

<!-- overview.component.html -->
<div>
  <button myDirective 
          (click)="proceedToDetail()"
  ></button>
</div>

// overview.component.ts

@Component({
  selector: 'overview',
  templateUrl: './overview.component.html',
})
export class OverviewComponent{
  @Output() proceedToDetailView = new EventEmitter();

  proceedToDetail(): void {
    this.proceedToDetailView.emit();
  }
}

Директива

// my.directive.ts

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @HostListener('click', ['$event'])
  handleEvent(event): void {
    console.log('this should be executed, but isn't');
  }
}

Answer 1

сделайте свой @Output parameter asyn c, это вызовет родительскую функцию на следующем тике, поэтому ваш директивный щелчок будет вызываться

  @Output() proceedToDetailView = new EventEmitter(true); // this will change from sync to async