Как создать и запустить пользовательское событие в угловых - PullRequest
Новая
       5

Как создать и запустить пользовательское событие в угловых

0 голосов
/ 20 мая 2019

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

<button (click)="doSomething()"></button>

Я хотел бы знать, возможно ли создать собственное событие и сделатьтоже самое.Допустим, я хочу создать собственное событие, например: deleteItem, возможно ли сделать что-то подобное?И как? 

<my-component (deleteItem)="doSomething()"></my-component>

Ответы [ 2 ]

1 голос
/ 20 мая 2019

Вам следует проверить пример документации Angular для , родитель слушает дочернее событие :

Вы объявляете свойство класса с помощью декоратора @Output() и создаете его экземпляр для нового экземпляра EventEmitter.

Пример из Angular Docs 

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }
}

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

Если событие выдает логическое значение, вы должны создать его с помощью @Output() eventName = new EventEmitter<boolean>();

Вышеприведенный компонент может использоваться в родительском компоненте с <app-voter (voted)="handleVote($event)"></app-voter>

1 голос
/ 20 мая 2019

Конечно, вы можете использовать eventEmitter в файл my-component ts добавьте это 

 @Output() deleteItem= new EventEmitter();

и когда вы хотите поднять событие, сделайте это 

  this.deleteItem.emit();

также вы можете передавать данные, как это 

  this.countUpdate.emit({value: some data });

затем перехватите его в родительском компоненте, как это 

<my-component (deleteItem)="doSomething($event)"></my-component>

и в родительском файле ts 

    doSomething(event)
    { 
       console.log(event);
    }
...