Метод не вызывается для события размытия, примененного к элементу span

Question

Я бы хотел, чтобы выполнялся следующий метод:

  setHeroButtonTextOption(heroButtonText) {
    this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
  }

Каждый раз, когда пользователь теряет фокус следующего элемента:

<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
  <div (click)="selectHeroButton($event, componentId + '-button')"
       [attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
       [ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
       id="{{componentId}}-button" style="display:inline-block">
    <button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
            class="builder-components hero-button-click btn hero-button">
      <span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
            (keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
            [attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
            [innerText]="heroButtonText" class="builder-components hero-button-click">
      </span>
    </button>
  </div>
</div>

В настоящее время этого даже не происходит хотя у меня есть событие размытия на <span>. Как я могу это исправить?

Answer 1

Событие размытия будет вызвано кнопкой, а не диапазоном. Если вы пытаетесь включить innerText диапазона с обработчиком событий, похоже, что он уже связан с heroButtonText, который вы можете передать как аргумент функции или ссылку из компонента.

<button (blur)="setHeroButtonTextOption(heroButtonText)">
  <span>{{ heroButtonText }}</span>
</button>

Edit - кнопка должна генерировать событие размытия. Если это не сработает, вам нужно будет опубликовать дополнительный код, возможно, removeLineBreaks($event) выдает ошибку, не позволяя сделать следующий вызов.