typescript Angular 5 单击绑定到锚标记

Angular 5 click bind to anchor tag

提问by javierojeda

I need to bind a click event on an anchor in my template:

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

My html looks like this:

我的 html 看起来像这样：

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

useris a variable from a previous *ngFor="let user of users"

user是前一个变量 *ngFor="let user of users"

The deleteUser()function is declared on my users.component.tsfile:

该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",
                        });
                    });
            }
          });
    }

}

However that click event is never triggered. It simply doesn't do anything. No errors, nothing. I've tried a lot of variations to try to make it work:

但是，永远不会触发该点击事件。它根本不做任何事情。没有错误，什么都没有。我尝试了很多变体来尝试使其工作：

• routerLink=""
• [routerLink]=""
• href=""
• href="#"
• href="#!"
• href="!#"
• Change <a>tag for <div>, <span>, <div>, <button>but none worked

• 路由器链接=""
• [路由器链接]=""
• href=""
• href="#"
• href="#!"
• href="!#"
• 更改, , 的<a>标签，但没有任何效果<div><span><div><button>

I've tried this another questionbut I think it didn't work because it is Angular2 (I'm using Angular 5).

我已经尝试过另一个问题，但我认为它不起作用，因为它是 Angular2（我使用的是 Angular 5）。

The template I'm using is Metronic(just in case is relevant)

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

回答by YOG_PHP

i was facing same problem, and find the solution just add class= 'btn' its working properlly.

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

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

回答by Vicky Kumar

I faced same issue where click event on < a > tag was not working.

我遇到了同样的问题，其中 < a > 标签上的点击事件不起作用。

Work around for that is to wrap < i > tag and put click event on that tag like below

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

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

With this way click event started working but still i had question in my mind why it was not working on < a > tag after some investigation i found it was not working because of below style applied on < a > tag

通过这种方式点击事件开始工作，但我仍然有疑问，为什么它在 < a > 标签上不起作用，经过一些调查我发现它不起作用，因为在 < a > 标签上应用了以下样式

pointer-events: none;

To fix that issue either remove above style or add below style

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

pointer-events: all;

Hope this will help if same problem is in your case

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

Apart from this as a best practice always add href="javascript: void(0)"in < a > tag to avoid it to navigating to home page and style cursor: pointer;if default style of < a > tag is getting over-ridden by some style in your appliction

除此之外，作为最佳实践，始终在 < a > 标签中添加href="javascript: void(0)"以避免导航到主页和样式cursor: pointer; 如果 < a > 标签的默认样式被应用程序中的某些样式覆盖

回答by Thomas

I had the same problem. My solution was:

我有同样的问题。我的解决方案是：

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

When you don't have an < i > tag there you can warp the Link text in < span >

当您没有 < i > 标签时，您可以在 < span > 中扭曲链接文本

回答by tbadlov

What worked for me was to set [routerLink]="['./']"in which case the a tag will beahve as a link but you can bin any additional action to it (e.g (click))

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

回答by Josf

(click) should work for the anchor tags in angular 5. I have tried it. The code seem to be alright to me except the sweet alert ( I don't know what that is).

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

Try adding a console.log in the start of the method and see if you get that in th elogs

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