如何仅针对特定元素在 angular 中发出事件？

Question

我正在 angular 中创建一个指令，以使用 bootstrap 弹出窗口制作确认弹出窗口，尽管我正在混合 jQuery 来实现它。在指令文件中代码如下：

@Output() confirmed = new EventEmitter();

constructor(
    private _ElementRef: ElementRef
) { }

ngOnInit() {
    $(this._ElementRef.nativeElement).popover({
        container: 'body',
        html: true,
        content: `
        <div class="text-center">
            <span class="d-block">Are you sure?</span>
            <div class="btn-group btn-group-sm mt-1">
                <button class="btn btn-outline-danger py-0" id="btn-confirm">Yes</button>
                <button class="btn btn-outline-primary py-0">No</button>
            </div>
        </div>`,
        placement: 'top',
        trigger: 'focus',
        boundary: 'window'
    });


    $('body').on('click', '#btn-confirm', () => {
        this.confirmed.emit();
    });

并且在组件的模板文件中：

<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">
<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">
<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">

每当我单击 #btn-confirm 时，confirmed() 方法就会在组件中执行三次。我怎样才能为特定按钮发出一次事件？

Answer 1

正确确定变量的范围，将钩子放在正确的函数上，遵循 HTML 规则（ID 是唯一的），充分发挥框架的潜力，我建议停止使用 JQuery，但既然你用到了，那就顺其自然吧。

@HostListener('click', ['$event'])
click(event) {

  const ID = Math.random().toString(36).slice(-8);

  $(this._ElementRef.nativeElement).popover({
    container: 'body',
    html: true,
    content: `
    <div class="text-center">
        <span class="d-block">Are you sure?</span>
        <div class="btn-group btn-group-sm mt-1">
            <button class="btn btn-outline-danger py-0" id="${ID}">Yes</button>
            <button class="btn btn-outline-primary py-0">No</button>
        </div>
    </div>`,
    placement: 'top',
    trigger: 'focus',
    boundary: 'window'
  });


  $('body').on('click', `#${ID}`, () => {
    this.confirmed.emit();
  });
}

这会将点击事件绑定到函数中，这意味着您只需在点击时创建一个弹出窗口，并在您确认时将其销毁。您的 ID 变得独一无二，不再产生冲突。为确保这一点，它们是动态创建的。

如何仅针对特定元素在 angular 中发出事件？

How to emit event in angular only for particular element?

jquery

angular

eventemitter

bootstrap-popover