Búsqueda de sitios web

typescript - Función de entrada de componente Angular 5 que toma parámetros

En un componente de Angular 2+, ¿cómo paso una función de callback que recibe parámetros? Mi suposición inicial era algo como

<app-example [onComplete]="doThing('someParam')"></app-example>

Y a veces no necesitaré ningún parámetro, como esto:

<app-example [onComplete]="doSomeThingElse()"></app-example>

Y luego en el componente tengo

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input() public onComplete: () => void;

  //run `this.onComplete()` somewhere as needed
}

Pero, lo que termina sucediendo es que el doThing('someParam') o doSomeThingElse() se llama inmediatamente sin ninguna interacción.

¿Cómo se supone que debo pasar funciones de devolución de llamada a un componente para que se llamen más tarde?

EDITAR :

El problema real que estoy tratando de resolver aquí es poder ejecutar cualquier función pasada en un momento posterior. Esto es para un componente de confirmación que preguntará al usuario "¿estás seguro de que quieres continuar?" y luego, si presionan el botón "Sí, estoy seguro", la función pasada se ejecutará.

Respuesta #1

Aquí hay un ejemplo de la sintaxis @Output que @toskv estaba buscando, Angular pasa una función de devolución de llamada al componente hijo como @Input

Así que, para tu ejemplo,

<app-example 
  (onComplete)="doThing()" 
  [completedParam]="'someParam'"></app-example>

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Output() public onComplete: EventEmitter<any> = new EventEmitter();
  @Input() completedParam;

  runOnComplete(): void {
    this.onComplete.emit(this.completedParam);
  }
}

No se siente tan bien como [onComplete]="doThing.bind(this, 'someParam')".

Respuesta #2

Plantilla:

<app-example [someParams]="someParamsObject"
             (complete)="onComplete($event)" >
</app-example>

Componente:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input()
  someParams: YourParamsType;

  @Output()
  complete:EventEmitter<any> = new EventEmitter<any>();

  //run `this.complete(this.someParams)` somewhere as needed and 
  //pack in some params if you need
}

En tu componente principal que llama, necesitas una función llamada onComplete que reciba un parámetro de tipo any en este caso (que proviene de @Output definido como EventEmitter<any>). Si lo necesitas, también puedes tener parámetros de evento de cualquier tipo particular que desees EventEmitter<YourParticularType>.

Artículos relacionados