Angular 指令 - 如何监听子组件的输出

Question

我的 customDirective 如何在以下示例中监听 clrDateChange 输出？

<clr-date-container customDirective>
    <label for="dateControl">Requirement Date</label>
    <input id="dateControl" type="date" [placeholder]="'TT.MM.YYYY'" [(clrDate)]="item.requirementDate" (clrDateChange)="onChange($event)" [ngModel]="null" name="requirementDate"/>
    <clr-control-error>{{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}</clr-control-error>
</clr-date-container>

对于普通的 DOM 事件，我可以使用 elementRef.nativeElement.querySelector('input') 检索子输入元素。然而 clrDateChange 是一个角度输出。

我想知道指令是否通常可以监听子组件的输出。

Answer 1

您可以使用模板引用变量。

@Directive({
  selector: '[customDirective]',
  exportAs: 'CustomDirective'
})
export class CustomDirective {

  foo() {
    // do something
  }

}

<clr-date-container customDirective #myCustomDirective="CustomDirective">
  <label for="dateControl">Requirement Date</label>
  <input id="dateControl"
         type="date"
         [placeholder]="'TT.MM.YYYY'"
         [(clrDate)]="item.requirementDate"
         (clrDateChange)="onChange($event); myCustomDirective.foo()"
         [ngModel]="null"
         name="requirementDate"/>
  <clr-control-error>
    {{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}
  </clr-control-error>
</clr-date-container>

编辑

如果只是订阅clrDate.clrDateChange。

import { Directive, ContentChild, AfterContentInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { ClrDateComponent } from '@clr/angular/*';

@Directive({
  selector: '[customDirective]',
  exportAs: 'CustomDirective'
})
export class CustomDirective implements AfterContentInit, OnDestroy {

  private destroy$ = new Subject();

  @ContentChild(ClrDateInput, {static: false}) clrDateComponent: ClrDateInput;

  ngAfterContentInit() {
    if (this.clrDateComponent) {
      this.clrDateComponent.clrDateChange
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        this.foo(data)
      })
    }
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  foo(data) {
    console.log(data);
    // do something
  }

}