Angular 以角度从指令向组件发射值

我想从一个指令向一个组件发出值，该组件上有一个应用了指令的模板。 我的指令使用elementRef，首先我要做的是更改本机元素的一些样式，然后将元素中的内部文本发送到组件中的数组。我该怎么做

指令：

    import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Output() onEmittedNumber:EventEmitter<any> = new EventEmitter();

  constructor(private el: ElementRef) {}

  @HostListener('click') onClick() {
    if(this.el.nativeElement.style.backgroundColor){
      this.el.nativeElement.style.backgroundColor = ''
    }else{
      this.el.nativeElement.style.backgroundColor = 'yellow'
      this.onEmittedNumber.emit(this.el.nativeElement.innerText)
    }
    this.onEmittedNumber.emit(this.el.nativeElement.innerText)
  }




}

---

在标记中，应按如下方式处理输出：

<div class="container-basic">
    <button
    appHighlight
    *ngFor="number of numbers; let i = index"
    type="text"
    class="btn-custom1"
    id="btn{{i}}"
    (onEmittedNumber)="onEmittedNumber($event)"
  >
    {{numbers[i]}}
  </button>
</div>

  onEmittedNumber(number){
    this.numbersChosen.push(number);
    console.log(this.numbersChosen);
  }

用

（数字）

<div class="container-basic">
    <button
    appHighlight
    *ngFor="number of numbers; let i = index"
    type="text"
    class="btn-custom1"
    id="btn{{i}}"
    (onEmittedNumber)="onEmittedNumber($event)"
  >
    {{numbers[i]}}
  </button>
</div>

  onEmittedNumber(number){
    this.numbersChosen.push(number);
    console.log(this.numbersChosen);
  }