レンダリングされた要素のイベントリスナを角2でバインドするにはどうすればよいですか?私はdragulaドラッグアンドドロップライブラリを使用しています。動的HTMLを作成しますが、私のイベントは動的HTML要素にバインドされていません。レンダリングされた要素のイベントリスナーを角2でバインドするにはどうすればよいですか?
6
A
答えて
15
import { AfterViewInit, Component, ElementRef} from '@angular/core';
constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('my-element')
.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
console.log(event);
}
+1
コンポーネントを破棄した後に手動クリーニング( '.removeEventListener()')が必要な場合、またはAngularがこれを処理しますか? – kraftwer1
+1
いいえ、それを必須に登録する場合は、それを必須に削除する必要があります。 –
2
あなたは、あなたがコンポーネントのコードの以下の部分を使用してイベントリスナーを設定することができ、レンダリングDOM要素で同じクラスを持つすべての要素の「クリック」などのイベントをバインドします。 TSファイル。角度4の要素にイベントリスナーを追加するために
import { Component, OnInit, Renderer, ElementRef} from '@angular/core';
constructor(elementRef: ElementRef, renderer: Renderer) {
dragulaService.drop.subscribe((value) => {
this.onDrop(value.slice(1));
});
}
public onDrop(args) {
let [e, el] = args;
this.toggleClassComTitle(e,'checked');
}
public toggleClassComTitle(el: any, name: string) {
el.querySelectorAll('.com-item-title-anchor').forEach(function (item) {
item.addEventListener('click', function(event) {
console.log("item-clicked");
});
});
}
1
、我々はRenderer2サービスの方法listen使用することができます(Renderer is deprecatedを、そうRenderer2を使用):「ウィンドウ:
は(ターゲット聞きます'|' ドキュメント '|' 身体 '|任意の、eventNameの:文字列、コールバック(イベント:任意の)=>ブール|無効):()=>無効
例:
export class ListenDemo implements AfterViewInit {
@ViewChild('testElement')
private testElement: ElementRef;
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
this.renderer.listen(this.testElement.nativeElement, 'click',() => {
this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green');
});
}
}
関連する問題
- 1. 角2 - バインドされたプロパティであるrouterLinkにパラメータを渡すにはどうすればよいですか?
- 2. レンダリングされた子要素にバインドされていないコンポーネントメソッドを起動するにはどうすればよいですか?
- 3. 角2の指示文で現在の要素にアクセスするにはどうすればよいですか?
- 4. 角度2.入力データが変更された後、角レンダリングのレンダリングを理解するにはどうすればよいですか?
- 5. 要素を複製してイベントリスナーを保持するにはどうすればよいですか?
- 6. DOM要素のイベントリスナーのリストを見つけるにはどうすればよいですか?
- 7. CakePHPでは、コントローラ内のプラグインから要素をレンダリングするにはどうすればよいですか?
- 8. 他の要素のように要素をスライドさせるにはどうすればいいですか?
- 9. クリックイベントを角度2の関数にバインドするにはどうすればよいですか?
- 10. テーブルの行要素で複数のCSSクラスをバインドするにはどうすればよいですか?
- 11. どのようなイベントがDOM要素にバインドされているかを確認するにはどうすればよいですか?
- 12. レンダリングされたHTMLテンプレートからJSテンプレートをレンダリングするにはどうすればよいですか?
- 13. JavaScriptでスケーリングされたSVG要素の幅を取得するにはどうすればよいですか?
- 14. FullCalender.js:レンダリングされたテンプレートに変数をレンダリングするにはどうすればよいですか?
- 15. d3.jsでイベントリスナーをカスタマイズするにはどうすればよいですか?
- 16. javascriptでイベントリスナーを削除するにはどうすればよいですか?
- 17. Ammyの要素名で値をバインドするにはどうすればよいですか?
- 18. プレーンなJSでDOM要素を動的にレンダリングするにはどうすればよいですか?
- 19. Knockoutの別の要素にバインドされたViewModelにはどうすればアクセスできますか?
- 20. 角度1.5.8 - 角度で要素にデータをバインドすると、アクションを実行するにはどうすればよいですか?
- 21. イベントリスナーをイベントリスナーによって追加されたフォーム要素に追加する
- 22. このjQueryイベントをHTML要素のホバーにバインドするにはどうすればよいですか?
- 23. 角2ネストされた構造を作成するにはどうすればよいですか?
- 24. ドロップダウンリストの選択された要素をボタンに表示するにはどうすればよいですか?
- 25. 継承された要素でディレクティブスコープを共有するにはどうすればよいですか?
- 26. データベースフィールドをASP.NET 2.0のHTML TITLE要素にバインドするにはどうすればよいですか?
- 27. フォームにレンダリングされる要素が残っているかどうかを検出するにはどうすればよいですか?
- 28. 角2経路をモックするにはどうすればよいですか?
- 29. 角2メソッドを公開するにはどうすればよいですか?
- 30. このJSON解析されたハッシュの要素にアクセスするにはどうすればよいですか?
「レンダリングされた要素」または「ダイナミックHTML要素」とは何ですか?あなたが達成しようとしていることを示すコードを追加してください。 –