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

Question

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

我有组件：

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

我想调用这个函数：

export class Directive {

functionFromDirective() {
//something hapenns
}

我该怎么做？

Answer 1

您可以使用 ViewChild 从组件的模板中检索指令，如下所示：

@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

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

相反，该指令应实现 AfterViewInit 接口：

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

这样，您的组件就不必知道有关指令的任何信息。

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

How can I call function from directive after component's rendering?

typescript

angular2-directives

angular2-components

angular