angular - 在 Angular Directive(指令)组件之外调用函数

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

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

Defines the name that can be used in the template to assign thisdirective 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>