Передача / отправка событий через родительский компонент?

Question

В Angular я могу создать дочерний компонент, который испускает действие:

@Component({
   ...
    template: `
      <button (click)='someAction($event)'>Click Me</button>
    `
})
export class ChildComponent {

    @Output() onChildAction = new EventEmitter();

    childAction() {
      this.onChildAction.emit();
    }
}

и родительский компонент для его обработки.Что-то вроде:

@Component({
    ...
    template: `
      <child-component (onChildAction)="parentAction()"></child-component>
    `
})
export class ParentComponent {
    parentAction() {
      console.log('Hello');
    }
}

Это прекрасно работает, но есть ли способ «выполнить» действие напрямую к родителю, не создавая обработчик щелчков в дочернем элементе, который вызывает .emit()?

Что-то вроде:

@Component({
   ...
    template: `
      <button (click)='onChildAction.emit($event)'>Click Me</button>
    `
})
export class ChildComponent {
    @Output() onChildAction = new EventEmitter();
}

и:

@Component({
    ...
    template: `
      <child-component (onChildAction)="parentAction()"></child-component>
    `
})
export class ParentComponent {
    parentAction() {
      console.log('Hello');
    }
}

, где событие немедленно передается родителю без необходимости проходить через дочерний обработчик.Это полезно, когда у вас просто есть события click в дочернем элементе, которые вы хотите разрешить родительскому компоненту обрабатывать.

Answer 1

Определенно возможно генерировать события из файла шаблона.На самом деле я делаю то же самое, когда это однострочный код.Это также легко читать.

<button (click)='onChildAction.emit($event)'>Click Me</button>

Вот это DEMO