angular - ¿Cómo puedo llamar a una función desde una directiva después del renderizado del componente?

¿Cómo puedo llamar a una función desde una directiva después de la renderización del componente?

Tengo componente:

export class Component {
  ngAfterContentInit() {
  // How can i call functionFromDirective()?
  }
}

Y quiero llamar a esta función:

export class Directive {

functionFromDirective() {
//something hapenns
}

¿Cómo puedo hacer esto?

Respuesta #1

Puedes obtener la Directiva del template del Componente con ViewChild así:

@Directive({
  ...,
  selector: '[directive]',
})
export class DirectiveClass {
  method() {}
}

En tu componente:

import { Component, ViewChild } from '@angular/core'
import { DirectiveClass } from './path-to-directive'

@Component({
  ...,
  template: '<node directive></node>'
})
export class ComponentClass {
  @ViewChild(DirectiveClass) directive = null

  ngAfterContentInit() {
    // How can i call functionFromDirective()?
    this.directive.method()
  }
}

Respuesta #2

Llamar al método desde dentro de un componente no es una buena idea. Usar una directiva ayuda en un diseño modular, pero cuando llamas al método, obtienes una dependencia del componente hacia la directiva.

En su lugar, la directiva debería implementar la interfaz AfterViewInit:

@Directive({
    ...,
    selector: '[directive]',
})
export class DirectiveClass implements AfterViewInit {
    ngAfterViewInit(): void {}
}

De esta manera, su componente no tiene que saber nada sobre la directiva.