web-dev-qa-db-ja.com

Angular2-動的に追加されたHTMLでイベントをキャッチ/サブスクライブ（クリック）します

(click)イベントを含む文字列をAngular2テンプレートに挿入しようとしています。文字列は、DOMがロードされた後、バックエンドから動的に取得されます。 Angularが挿入された(click)イベントを認識しないのは当然のことです。

テンプレートの例：

<div [innerHTML]="test"></div>

バックエンドから与えられた文字列の例：

var test = "When ready, <span (click)=\"itemClick($event)\">click me</span>."

Angularコンポーネントでの関数呼び出しの例：

itemClick(event) {
   debugger;
}

var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>."

案の定、itemClick is not definedというエラーが発生するので、そのjavascript関数を探していることがわかります。

質問： Angular2にこのイベントまたは関数をサブスクライブさせるにはどうすればよいですか？

javascripteventstry-catchangularsubscribe
8
Rhyeen

宣言型イベントバインディングは、コンポーネントテンプレートの静的HTMLでのみサポートされます。
動的に追加された要素のイベントをサブスクライブする場合は、必ず実行する必要があります。

elementRef.nativeElement.querySelector(...).addEventListener(...)

または類似。

WebWorkerに対して安全になりたい場合は、Rendererを挿入できます。

constructor(private elementRef:ElementRef, private renderer:Renderer) {}

代わりに使用してください

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});

イベントハンドラーを登録します。

参照 Angular 2 にイベントリスナーを動的に追加する

14
Günter Zöchbauer

サービスにElementRefをインポートする際に問題が発生し、レンダラーを渡したくありませんでした）そこを参照してください。このサービスは、3秒後に動的閉じるボタンが接続された「読み込み中...」ダイアログを表示することを目的としています。 jQueryを使用してこのボタンのクリックイベントを追加する方法を見つけました。うまくいけば、これは誰かを助けます。

（1）jQueryをAngular 2 index.html fileに追加します

_<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
_

enter image description here

（2）$を宣言します

_declare var $: any;
_

enter image description here

（3）jQueryを使用するこれは私のサービスからのコードの一部です：

_ public async present() {
    this.isLoading = true;
    return await this.loadingController.create({message: 'Loading...'}).then(a => {
      a.present().then(() => {
        setTimeout(() => {
          a.message += '<ion-icon name="close-circle" class="alert-cancel-button"></ion-icon>';


          // Here starts jQuery usage
          $(a).click((clickedObject) => {
            if ($(clickedObject.target).hasClass('alert-cancel-button')) {
              this.dismiss();
            }
          });


        }, 3000);
      });
    });
  }

  public async dismiss() {
    return await this.loadingController.dismiss();
  }
_
  • ちなみに$('alert-cancel-button').click(() => this.dismiss())は機能しませんでした。
0
Kroksys