Angulaire 5 entrée de Composant fonction qui prend en paramètres

Dans Angulaire 2+ composant, comment puis-je passer dans une fonction de rappel qui prend des paramètres?
Mon hypothèse de départ était quelque chose comme

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

Et parfois, je n'aurez pas besoin de paramètres, comme ceci:

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

Et puis, en le composant, j'ai

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
}

Mais, ce qui finit par arriver, c'est que le doThing('someParam') ou doSomeThingElse() est immédiatement appelé sans aucune interaction.

Comment suis-je censé passer des fonctions de rappel à un composant appelé plus tard?

EDIT:

Le réel problème, je suis en train d'essayer de résoudre ici est d'être en mesure d'exécuter tout passé en fonction au plus tard. C'est un composant de confirmation qui va demander à l'utilisateur "êtes-vous sûr de vouloir continuer?" et puis si ils appuyez sur la touche "Oui j'en suis sûr", le passé en fonction d'exécution.

n'est-ce pas réinventer la roue avec des événements et potentiellement dangereux, avec des fuites de mémoire? (et non pas la solution mais l'intention elle-même)
bind méthode de retour d'une fonction nouvelle à chaque fois angulaire des appels à la détection de changement de cycle. Je suis d'accord, il ne faut pas réinventer la roue)
vous devriez lire sur @Sortie. C'est ce que vous cherchez.
Je sais de @Output pour transmettre des valeurs de retour d'un contrôleur de parent, mais je ne suis pas sûr de savoir comment j'allais utiliser qu'ici, dans ce contexte. N'hésitez pas à ajouter une réponse à cette question avec les détails, et je vais le marquer comme étant correcte. De me dire de "lire sur" quelque chose n'est pas très utile pour moi en ce moment.
vous pourriez être mieux fait de décrire le problème que vous souhaitez résoudre. Problème n'étant pas de "passage d'une fonction de rappel comme variable' mais un réel problème que vous souhaitez que votre composant(s) à résoudre. Solution habituelle pour ce type d'analyse est d'envoyer des paramètres à l'enfant comme @Input params et ensuite événement lié avec @Output et de l'événement seront soulevées à ce que les arguments que vous voulez. Lorsque l'événement est déclenché, votre parent composant d'appel quelle que soit la fonction qu'il veut (votre rappel dans le cas ci-dessus) avec tout ce que les paramètres qu'il a obtenu par le biais de l'événement.

OriginalL'auteur Chris Barr | 2017-12-28

  1. 17

    Voici un exemple de la @Output syntaxe @toskv cherchais, Angulaire passer fonction de rappel pour le composant enfant @l'Entrée

    Donc, pour votre exemple, 

    <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);
  }
}

    Ne se sent pas aussi bon que [onComplete]="doThing.bind(this, 'someParam')".

    J'ai été en mesure de supprimer les @Input() completedParam; et il suffit d'appeler this.onComplete.emit() et il a travaillé avec tout ce que j'ai réussi ou n'a pas passé. merci!
    Intéressant, donc (onComplete)="doThing('someParam')"? Je suppose que c'est ok parce que ce paramètre est une chaîne fixe au moment de la compilation?
    Yep, ça a fonctionné, et je suis heureux, car il serait difficile d'avoir un contrôleur de parent qui avait la fonction que j'ai besoin de courir, mais alors le passer sans paramètre et passer des paramètres à une autre liaison. C'est exactement ce que j'espérais, serait de travailler! Je n'ai fait essayer à l'origine, mais j'ai rencontré un autre problème et supposé que c'était lié, j'ai donc fait marche arrière et a posté cette question. Oh bien!

    OriginalL'auteur eric99

  2. 3

    Modèle:

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

    Composant:

    @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
}

    Dans votre appel, composant parent vous avez besoin d'une fonction nommée onComplete qui reçoit un paramètre de type any dans ce cas (qui vient de @Output étant défini comme EventEmitter<any>). Si vous avez besoin, vous pouvez également avoir des paramètres d'événement d'un type que vous aimez EventEmitter<YourParticularType>.

    OriginalL'auteur dee zg

  3. 1

    Vous pouvez avoir une méthode privée dans votre composant:

    private doThingFactory(param) {
  return () => this.doThing(param);
}

    et ensuite l'utiliser comme ça:

    <app-example [onComplete]="doThingFactory('someParam')"></app-example>
    J'ai pensé que cela pourrait fonctionner, mais je voudrais éviter si possible. Il semble que Angulaires suffit d'avoir un moyen de passer d'une fonction et à l'appeler plus tard
    En fait, il n'est pas une bonne pratique. Angulaire vous encourage à utiliser d'Entrée et de Sortie à résoudre vos problèmes, et de ne pas utiliser les fonctions de rappel si possible. Vous devez envoyer someParam comme entrée et de recevoir le résultat en sortie.
    Je pense que le @de Sortie est ce qu'il cherche. Peut-être ajouter un exemple de ce trop?

    OriginalL'auteur Sagi

  4. 0

    Ladite solution ne fonctionne que si vous avez une méthode qui doit invoquer sans agir sur le composant lui-même. Cependant, dans mon cas, j'ai besoin d'exécuter une observable méthode à l'intérieur de l'application-exemple de composant et d'attendre la réponse à faire une certaine action à l'intérieur de ce composant.

    Si quelqu'un a le même problème. Voici la solution pour elle.

    1. créer une interface.

      export interface Delegate<T> {
  (...args: any[]): T;
}

    2. Sur votre angulaire composant, créer un @Input variable

      @Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
})
export class AppExampleComponent {
  @Input() executeWhen: Delegate<Observable<any>>;

  runOnComplete(): void {
    this.executeWhen().subscribe(() => //do some action);
  }
}
    création de l'Interface est la solution à utiliser @Input et la fonction de rappel peut être appelé plus tard, au lieu de procéder à @Output Paramètre.

    OriginalL'auteur Yhan