web-dev-qa-db-ja.com

Angular 5アンカータグにバインドをクリック

テンプレートのアンカーにクリックイベントをバインドする必要があります。

私のhtmlは次のようになります：

_<a (click)="deleteUser(user)">
    <i class="la la-trash"></i>
</a>
_

userは以前の_*ngFor="let user of users"_からの変数です

deleteUser()関数は、_users.component.ts_ファイルで宣言されています。

_import { Component, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
import { Helpers } from '../../../../helpers';
import { ScriptLoaderService } from '../../../../_services/script-loader.service';

import { User } from '../../../../models/user';
import { UsersService } from '../../../../_services/users.service';

import swal from 'sweetalert';


@Component({
    selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
    templateUrl: "./users.component.html",
    styleUrls: ["./users.component.scss"],
    encapsulation: ViewEncapsulation.None,
})
export class UsersComponent implements OnInit, AfterViewInit {

    users: User[];

    constructor(
        private _script: ScriptLoaderService,
        private usersService: UsersService
    ) { }

    ngOnInit() {
        this.getUsers();
    }

    getUsers(): void {
        this.usersService.getUsers()
            .subscribe(users => this.users = users)
    }

    ngAfterViewInit() {
        this._script.load('.m-grid__item.m-grid__item--fluid.m-wrapper',
            'assets/app/js/users.js');
    }

    deleteUser(user: User): void {
        swal({
            title: `Eliminar usuario ${user.name}`,
            text: "Una vez eliminado, toda su información será eliminada!",
            icon: "warning",
            dangerMode: true,
          })
          .then((willDelete) => {
            if (willDelete) {
                this.usersService.deleteUser(user.id)
                    .subscribe(() => {
                        swal("Usuario eliminado", {
                            icon: "success",
                        });
                    });
            }
          });
    }

}
_

ただし、そのクリックイベントはトリガーされません。それは単に何もしません。エラーなし、何もありません。私はそれを機能させるために多くのバリエーションを試しました：

  • routerLink = ""
  • [routerLink] = ""
  • href = ""
  • href = "＃"
  • href = "＃！"
  • href = "！＃"
  • _<a>_、_<div>_、_<span>_、_<div>_の_<button>_タグを変更するが、どれも機能しなかった

私はこれを試しました 別の質問 ですが、Angular2であるため機能しなかったと思います（Angular 5）を使用しています）。

私が使用しているテンプレートは Metronic です（念のためです）

typescripteventsangular5
4
javierojeda

私は同じ問題に直面しており、解決策を見つけるだけで、class = 'btn'が適切に機能するように追加します。

<a class ='btn' ><i (click)="deleteUser(user)" class="la la-trash"></i></a>
7
YOG_PHP

<a>タグのクリックイベントが機能しないという同じ問題に直面しました。

そのための回避策は、以下のように<i>タグをラップし、そのタグにクリックイベントを配置することです

<a href="javascript: void(0)" >
<i class="la la-trash" (click)="deleteUser(user)"></i>
</a>

このようにしてクリックイベントが機能し始めましたが、それでもなぜ<a>タグで機能しなかったのか疑問に思っていましたが、調査の結果、<a>タグに以下のスタイルが適用されているため機能していないことがわかりました

pointer-events: none;

この問題を修正するには、上のスタイルを削除するか、下のスタイルを追加します

pointer-events: all;

これが同じ問題があなたのケースにある場合に役立つことを願っています

これとは別に、ベストプラクティスとして常にhref = "javascript：void（0）"を<a>タグに追加して、ホームページおよびスタイルに移動しないようにしますcursor：pointer; <a>タグのデフォルトスタイルがアプリケーションのスタイルによって上書きされている場合

2
Vicky Kumar

私も同じ問題を抱えていました。私の解決策は：

<a href="" ><i (click)="deleteUser(user)" class="la la-trash"></i></a>

<i>タグがない場合、<span>のリンクテキストをワープできます。

1
Thomas

私にとってうまくいったのは、[routerLink]="['./']"この場合、タグはリンクとして機能しますが、追加のアクションをタグ付けできます（例：(click)）

0
tbadlov

（クリック）は、angular 5.のアンカータグで機能するはずです。5.試してみました。コードは、甘い警告（それが何であるかわからない）以外は問題ないようです。

メソッドの最初にconsole.logを追加してみて、elogでそれが表示されるかどうかを確認してください

0
Josf