如何在组件渲染后从指令调用函数？

Question

如何在组件渲染后从指令调用函数?

我有组件:

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

我想调用这个函数:

export class Directive {
functionFromDirective() {
//something hapenns
}

我该怎么做?

Answer 1

你可以像这样用ViewChild从Component的模板中检索指令:

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

在你的组件中:

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()
  }
}

Answer 2

从组件内部调用该方法不是一个好主意。使用指令有助于模块化设计，但当你调用该方法时，你会从组件获得对该指令的依赖。

相反，指令应该实现afterviewit接口:

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