Angular2 EventEmitter и preventDefault()

Question

Есть ли способ в Angular2, чтобы каким-то образом предотвратить по умолчанию события, используя EventEmitter?

У меня есть следующий сценарий:

import {Component, Output, EventEmitter} from 'angular2/core' 

@Component({ 
    selector: 'my-component', 
    template: `<button (click)="clickemitter.emit($event); onClick($event)" [style.color]="color"><ng-content></ng-content></button>` 
}) 
export class MyComponent { 
    @Output clickemitter: EventEmitter<MouseEvent> = new EventEmitter(); 

    private color: string = "black"; 

    constructor() { 

    } 

    private onClick(event: MouseEvent): void { 
    if(!event.defaultPrevented) //gets called before the observers of clickemitter 
     this.color = "red"; 
    else this.color = "blue"; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <my-component (clickemitter)="$event.preventDefault()">Hello Angular</my-component> 
    `, 
    directives: [MyComponent] 
}) 
export class App { 
    constructor() { 

    } 
} 

Я сделал Plunker для этого тоже: https://plnkr.co/edit/yIoF1YgvkiZLBPZ6VHTs?p=preview

Проблема Если я нажимаю на кнопку цвет кнопки не будет повернуть синим, как следует, но вместо этого он станет красным. Возможно, это связано с тем, что EventEmitter.emit()/next(), похоже, работает асинхронно. Я попытался решить эту проблему, также подписавшись на мой метод onClick() на эмиттере и просто позвонил clickemitter.emit ($ event) в обработчик события (нажмите). Это будет работать для демонстрации Plunker, когда я сделал это в ngAfterInit(). Но что, если кто-то позже присоединяется к кликере? Мой компонент будет вызван до этого наблюдателя, и мой компонент будет непоследовательным.

Вопрос Как я могу гарантировать, что мой компонент OnClick() обработчик будет вызван на самой последней, чтобы гарантировать, что ни один другой наблюдатель не может изменить поведение по умолчанию после этого? Или существует совершенно другой способ достижения моей цели?

Answer 1

Я реализовал event.preventDefault как это

export class ObserveComponent{ 
    onSubmit(event:Event){ 
    event.preventDefault(); 
    } 
} 

остановил перезагрузки страницы каждый раз, когда я попытался получить доступ значение ключа, который не существует в объекте

Answer 2

Просто используйте return false;
здесь код который я использовал для предотвращения по умолчанию

@HostListener('click') open(){ 
     this._isOpen = !this._isOpen; 
     return false; 
    } 

И stopPropagation

@HostListener('click', ['$event']) 
onClick(e) { 
    alert("we have performed click"); 
    e.stopPropagation(); 
} 

Answer 3

Для решения этой проблемы использовать это в шаблоне HTML

<button (click)="clickemitter(a,b,c); $event.stopPropagation(); [style.color]="color"><ng-content></ng-content></button>

As $ event.stopPropagation(); работает, чтобы остановить событие кликов по умолчанию, и ваша кнопка вызывает только событие вызова, которое написано (щелчок) = «....», который является clickemitter.emit (a, b, c)

Это поможет вам. Спасибо.