Angular 5点击绑定到锚标签答案

【问题标题】：Angular 5 click bind to anchor tagAngular 5点击绑定到锚标签
【发布时间】：2018-01-09 23:02:15
【问题描述】：

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

我的 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="!#"
将<div>、<span>、<div>、<button> 的标签更改为<a>，但均无效

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

我使用的模板是Metronic（以防万一）

【问题讨论】：

你怎么知道它从未被解雇？我的意思是你是怎么调试的？
那么，我假设您的警报也没有出现？根据您对另一个答案的评论，我假设您在致电 swal() 之前确实尝试过 console.log()。这确实很奇怪。控制台是否显示在注册 (click) 事件之前发生的任何错误？还是您的控制台是空的并且“干净”，没有任何警告、错误或任何东西？例如，您是否使用 VSCode 和 Chrome 调试器进行了调试？
这是一个老问题，但最好知道那里发生了什么。 @AgashThamo。是的，控制台显示为空且干净。没有错误，没有警告，什么都没有。那时我还不知道如何使用 VSCode 调试器。但是我使用了 javascript debugger 函数，但似乎永远无法使用该函数

标签： typescript events angular5

【解决方案1】：

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

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

【讨论】：

这是要走的路！
这只有在您使用 Bootstrap 作为前端框架时才有效...

【解决方案2】：

我遇到了同样的问题，即标签上的点击事件不起作用。

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

<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:pointer ; 如果标签的默认样式被您的应用程序中的某些样式覆盖

【讨论】：

+1 对于这个答案，因为其他答案调用点击事件，但 a 标签然后调用页面刷新。 href="javascript: void(0)" 是解决方案。

【解决方案3】：

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

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

当你没有 标签时，你可以在

中扭曲链接文本

【讨论】：

【解决方案4】：

(click) 应该适用于角度 5 中的锚标记。我已经尝试过了。除了甜蜜的警报（我不知道那是什么）之外，代码对我来说似乎没问题。

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

【讨论】：

已经这样做了。 console.log 也没有显示。起初我以为它与另一个名为 deleteUser 的函数有关，但我的函数是整个代码库中唯一定义的函数

【解决方案5】：

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

【讨论】：