Angular 5 点击绑定到锚标签

Question

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

我的 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> 标签，但 none 有效

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

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

Answer 1

(click) 应该对 angular 中的锚标签有效 5. 我试过了。除了甜蜜的警报（我不知道那是什么），代码对我来说似乎没问题。

尝试在方法的开头添加一个 console.log 并查看您是否在日志中得到它

Answer 2

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

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

如果您没有 < i > 标签，您可以在 < span >

中扭曲 Link 文本

Answer 3

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

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

Answer 4

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

解决这个问题的方法是包装 < i > 标签并将点击事件放在该标签上，如下所示

<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; 如果标签的默认样式正在通过您的应用程序中的某些样式获得 over-ridden

Answer 5

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

Angular 5 点击绑定到锚标签

Angular 5 click bind to anchor tag

events

typescript

angular5