时间戳

首页 > 解决方案 > Angular：从组件中的指令调用方法

angular - Angular：从组件中的指令调用方法

问题描述

我正在尝试从指令中调用方法。可以说我有指令 myDirective.ts

@Directive({
  selector: '[something]',
})
export class myDirective implements OnInit {
....
public myMethod(){
console.log(it works)
}
....
}

和 component.ts （这是我发现的，但在 this.directive 上我得到错误对象可能为空）

@Component({
  selector: '...',
  templateUrl: '....html',
  styleUrls: ['....css'],
})
export class MyComponent implements OnInit {
  @ViewChild(myDirective) directive = null

  ngOnInit() {
  }

  onClickFunction() {
    return (
      this.directive.myMethod();
    );
  }
}

如何在组件中调用此方法？

标签： angulartypescriptangular-directive

解决方案

就这样跑

@Component({
  selector: '...',
  templateUrl: '....html',
  styleUrls: ['....css'],
})
export class MyComponent implements OnInit {
  @ViewChild(myDirective) directive;

  ngOnInit() {
  }

  onClickFunction() {
    return (
      this.directive?.myMethod()
    );
  }
}

在 tsconfig.json 添加

"strictPropertyInitialization":false,

推荐阅读