指令发出的事件不起作用

Question

我正在努力从放置在指令内部的事件发射器接收任何值。我对Angular还是很陌生，不知道那里到底出了什么问题。提前致谢。我敢肯定，值被注入到onMouseEnter()方法中，因为它们被记录到那里的控制台中，但是changePar()方法甚至没有被调用过。你能给我任何建议吗？

组件：

@Component({
  selector: 'app-our-history',
  templateUrl: './our-history.component.html',
  styleUrls: ['./our-history.component.css'],
  providers: [MakeActiveDirective]
})
export class OurHistoryComponent implements OnInit {

  private history: Observable<HistoryModel[]>;
  private desc: string;


  constructor(private dsService: DataStorageService) {
  }

  ngOnInit() {
    this.history = this.dsService.fetchHistory();
  }

  changePar(data: string) {
    this.desc = data;
    console.log(data);
  }
}

HTML文件：

<div class="main-container">
  <h1>This is our history!</h1>
  <div class="wrapper">
    <div class="timeline-area">
      <div class="line-area"></div>
      <div *ngFor="let historyItem of (history | async)"
           class="single-item"
           appMakeInactive>
          <span appMakeActive
                [item]="historyItem">
            {{ historyItem.historyHeading }}
          </span>
        <div class="img-area">
          <a href="">
            <img [src]="historyItem.image | addPrefix" alt="">
          </a>
        </div>
      </div>
      <div appMakeActive (historyItem)="changePar($event)"> {{ desc }}</div>
    </div>
  </div>
</div>

指令：

@Directive({
  selector: '[appMakeActive]'
})
export class MakeActiveDirective {

  @Output() historyItem: EventEmitter<string> = new EventEmitter<string>();

  @Input() item: HistoryModel;

  constructor(private elementRef: ElementRef,
              private renderer: Renderer2) {
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.elementRef.nativeElement.parentElement.classList.add('active');
    this.historyItem.emit(this.item.historyDescription);
    console.log(this.item.historyDescription);
  }
}