角度5单击绑定到锚标记 [英] Angular 5 click bind to anchor tag

问题描述

我需要在模板的锚点上绑定一个点击事件:

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

我的html看起来像这样:

My html looks like this:

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

user是上一个*ngFor="let user of users"

在我的users.component.ts文件中声明了deleteUser()函数:

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

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 =！#"
• 将<div>，<span>，<div>，<button>的<a>标记更改为

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

我已经尝试过另一个问题，但我认为没用，因为它是Angular2(我使用的是Angular 5).

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

我正在使用的模板是 Metronic (以防万一是相关的)

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

推荐答案

我遇到了同样的问题，并且找到解决方案只是将class ='btn'正确地添加了.

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

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

这篇关于角度5单击绑定到锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！