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).当我在ngAfterInit()中执行此操作时,这适用于Plunker演示.但是如果有人后来订阅了这个陈词滥调呢？我的组件将再次在该观察者之前调用,并且我的组件将不一致.

问题 如何确保我的组件onClick()处理程序将在最后被调用,以保证其他观察者之后不能阻止默认行为？或者是否有完全不同的方式来实现我的目标？

Answer 1

要解决此问题,请在html模板中使用此方法

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

正如$event.stopPropagation();工作停止默认点击事件和你的按钮只调用写在(click)="...." 其中的事件clickemitter.emit(a,b,c)

也许这对你来说很有帮助.谢谢.

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

我像这样实现了 event.preventDefault

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

每次我尝试访问对象中不存在的键的值时都会停止页面重新加载