Question

尽管我混合使用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()方法就会在组件中执行3次。如何一次发出特定按钮的事件？

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();
  });
}

这会将click事件绑定到该函数，这意味着您仅在click上创建一个弹出窗口，并且在确认时会被破坏。您的ID变得唯一，不再产生冲突。为确保这一点，它们是动态创建的。

如何仅针对特定元素以角度发出事件？

1 个答案: