javascript - 从指令在主机上触发事件

Question

我正在尝试自动关闭 NG Bootstrap alert一段时间后。警报已经有我在组件中使用的关闭事件。我正在添加额外的超时功能作为指令，它应该能够触发关闭事件本身。是这样的吗？

close-on-timeout.directive.ts

import { Directive, ElementRef, HostBinding, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appCloseOnTimeout]'
})
export class CloseOnTimeoutDirective implements OnInit {
  @Input() appCloseOnTimeout: number;
  @HostBinding('close') close: CloseEvent;

  constructor () {}

  ngOnInit () {
    setTimeout (() => this.close(), this.appCloseOnTimeout);
  }
}

我希望能够像这样使用指令:

<ngb-alert
  [dismissible]="alert.dismissible"
  [type]="alert.type"
  (close)="onClose(i)"
  [appCloseOnTimeout]="1000"
>

访问宿主元素的关闭事件的最佳方式是什么？我已经尝试使用 ElementRef 代替，但仍然找不到访问事件的方法。

Answer 1

使用类似...

import { Directive, ElementRef, HostBinding, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Directive({
 selector: '[appCloseOnTimeout]'
})
export class CloseOnTimeoutDirective implements OnInit {
 @Input() appCloseOnTimeout: number;
 @Output() close:EventEmitter<any> = new EventEmitter();

 constructor () {}

 ngOnInit () {
  setTimeout (() => this.closeWrapp(), this.appCloseOnTimeout);
 }

 closeWrapp(){
  this.close.emit()
 }
}