web-dev-qa-db-ja.com

Angular2 EventEmitterおよびpreventDefault（）

EventEmitterを使用してイベントのデフォルトを何らかの形で防ぐ方法がAngular2にありますか？

次のシナリオがあります。

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() {

  }
}

私もこのためにプランカーを作成しました： https://plnkr.co/edit/yIoF1YgvkiZLBPZ6VHTs?p=preview

問題ボタンをクリックすると、ボタンの色が青にならず、代わりに赤になります。これは、EventEmitter.emit（）/ next（）が非同期で動作するように見えるためかもしれません。エミッタでonClick（）メソッドをサブスクライブすることでこの問題を解決しようとし、ボタン（クリック）イベントハンドラでclickemitter.emit（$ event）を呼び出すだけです。これは、ngAfterInit（）でPlunker Demoを実行したときに機能します。しかし、誰かがクリックエミッターを後で購読するとどうなりますか？私のコンポーネントは、そのオブザーバーの前に再び呼び出され、私のコンポーネントは矛盾します。

The QuestionどうすればコンポーネントonClick（）ハンドラーが最後に呼び出され、他のオブザーバーがその後のデフォルトの動作を妨げないことを保証できますか？ ？または、私の目標を達成するための完全に異なる方法がありますか？

angularpreventdefaulteventemitter
9
seraph

この問題を解決するには、HTMLテンプレートでこれを使用します

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

$event.stopPropagation();はデフォルトのクリックイベントを停止するように機能し、ボタンはclickemitter.emit(a,b,c)である_(click)="...."_で記述されたイベントのみを呼び出すため

たぶんこれはあなたへの完全な助けです。ありがとうございました。

12
Jatin Roy

return false;を使用するだけです
ここに私が使用したコードがありますデフォルトを防ぐ

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

そしてstopPropagation

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

このようにevent.preventDefaultを実装しました

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

オブジェクトに存在しないキーの値にアクセスしようとするたびにページのリロードを停止しました

0
Sandeep Chikhale