Búsqueda de sitios web

typescript - Llamar a función fuera del componente de directiva de Angular


¿Hay alguna manera de llamar a una función en mi directiva, pero fuera del componente?

Ejemplo :

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

Directiva:

@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?')
 }

}

Respuesta #1

Usa la propiedad exportAs en el decorador Directive así

Define el nombre que se puede usar en la plantilla para asignar esta directiva a una variable.

directiva.ts

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

Luego podemos acceder a nuestra instancia de barcodeScanner en cualquier parte de nuestra plantilla:

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

Artículos relacionados