Вопрос:

Угловой 5 клик привязать к тегу привязки

typescript events angular5

25899 просмотра

4 ответа

67 Репутация автора

Мне нужно привязать событие клика на якорь в моем шаблоне:

Мой 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 = "#!"
  • Изменить <a>тег для <div>, <span>, <div>, <button>но никто не работал

Я пытался ответить на этот вопрос, но я думаю, что он не работал, потому что это Angular2 (я использую Angular 5).

Шаблон, который я использую, является Metronic (на всякий случай актуален)

Автор: javierojeda Источник Размещён: 09.01.2018 11:02

Ответы (4)


0 плюса

330 Репутация автора

(щелчок) должен работать для тегов привязки в угловых 5. Я попробовал это. Код кажется мне в порядке, кроме сладкого предупреждения (я не знаю, что это такое).

Попробуйте добавить console.log в начале метода и посмотрите, получите ли вы это в elogs

Автор: Josf Размещён: 10.01.2018 03:01

1 плюс

202 Репутация автора

У меня такая же проблема. Мое решение было:

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

Если у вас нет тега , вы можете деформировать текст ссылки в

Автор: Thomas Размещён: 05.04.2018 07:23

3 плюса

115 Репутация автора

Решение

Я столкнулся с той же проблемой, и нашел решение, просто добавив class = 'btn', чтобы он работал правильно.

<a class ='btn' ><i (click)="deleteUser(user)" class="la la-trash"></i></a>
Автор: YOG_PHP Размещён: 02.07.2018 10:34

2 плюса

753 Репутация автора

Я столкнулся с той же проблемой, когда не срабатывало событие нажатия на тег .

Чтобы обойти это, нужно обернуть тег и добавить в него событие 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)" в тег , чтобы избежать перехода к домашней странице и стиля курсора: pointer; если стиль тега по умолчанию переопределяется каким-либо стилем в вашем приложении

Автор: Vicky Kumar Размещён: 28.05.2019 06:02
Вопросы из категории :
32x32