在 angular 指令组件之外调用函数

Question

有没有办法在我的指令中调用函数，但在组件之外？

示例：

<ion-input #bar barcodeScanner></ion-input>
<button (click)="bar.start()" type="button">
   <i class="my-icons-scaner"></i>
</button>

指令：

@Directive({
  selector: '[barcodeScanner]'
})
export class BarcodeScannerDirective implements OnInit {

constructor(private _element: ElementRef) {}

 ngOnInit() {
    const element = this._element.nativeElement
    console.log({ element })
 }

 public start(){
    console.log('start?')
 }

}

Answer 1

像这样在指令装饰器上使用 exportAs 属性

Defines the name that can be used in the template to assign this directive to a variable.

directive.ts

@Directive({
  selector: '[barcodeScanner]',
  exportAs: 'barcodeScanner'
})

然后我们可以在模板中的任何位置访问我们的 barcodeScanner 实例：

<ion-input #bar="barcodeScanner" barcodeScanner></ion-input>
<button (click)="bar.start()" type="button">
   <i class="my-icons-scaner"></i>
</button>

在 angular 指令组件之外调用函数

Call function outside of angular directive component

typescript

angular-directive

angular