Question

我需要在模板中的锚点上绑定click事件：

我的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 =＆＃34;＆＃34;
[routerLink] =＆＃34;＆＃34;
HREF =＆＃34;＆＃34;
HREF =＆＃34;＃＆＃34;
HREF =＆＃34;＃＆＃34; <！/ LI>
HREF =＆＃34;＃＆＃34;
更改<a>，<div>，<span>，<div>的{{1}}代码，但无效

我已尝试过此another question，但我认为它不起作用，因为它是Angular2（我使用的是Angular 5）。

我使用的模板是Metronic（以防相关）

Answer 1

我遇到了同样的问题，找到解决方案后，只需添加class ='btn'即可正常工作。

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

Answer 2

我遇到了同样的问题。我的解决方案是：

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

当你没有＆lt;我＆gt;标记在那里你可以扭曲＆lt;中的链接文本span＆gt;

Answer 3

（click）应该适用于角度为5的锚标签。我试过了。代码似乎对我好，除了甜蜜警报（我不知道那是什么）。

尝试在方法的开头添加一个console.log，看看你是否在elogs中得到了

Answer 4

我遇到了一个相同的问题，即标记上的点击事件不起作用。

解决方法是包装标签并将click事件放在该标签上，如下所示

<a href="javascript: void(0)" > <i class="la la-trash" (click)="deleteUser(user)"></i> </a>
通过这种方式，点击事件开始起作用，但是我仍然在想一个问题，为什么经过一些调查后，它为什么不能在标记上工作，我发现它由于在标记上应用了以下样式而无法正常工作

pointer-events: none;

要解决该问题，请删除上方样式或添加下方样式

pointer-events: all;

如果您遇到相同的问题，希望这会有所帮助

除此之外，作为最佳实践，请始终在标记中添加 href =“ javascript：void（0）” ，以避免其导航至首页和样式 cursor：指针； ；如果您的应用中的标记的默认样式已被某些样式覆盖

Answer 5

对我有用的是设置[routerLink]="['./']"，在这种情况下，标签将成为链接，但是您可以对其进行任何附加操作（例如(click)）

Angular 5单击绑定到锚标记

5 个答案: