web-dev-qa-db-fra.com

angular 4: appelle une méthode depuis un composant différent

J'ai 2 composants frères, je fais une demande http dans un composant, et si une condition particulière se produit, il devrait faire une autre demande http, écrite dans un autre composant. Je devrais donc pouvoir appeler la méthode dans le premier composant.

c'est le premier composant: 

import { Component, OnInit, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css'],
})

export class InputFieldComponent implements OnInit {

value = '';
output = '';
@Inject(SendCardComponent) saro: SendCardComponent;

constructor(private http : Http) { }
onEnter(value: string) { 

this.value = value;


this.http.post('http://localhost:5000/APIconversation/', {"val":value})
  .map(response=>response.json())
  .subscribe(
      data => {

            this.output = data.result.fulfillment.speech,
            if(data.result.fulfillment.speech == 'test'){
                saro.sendCard('done', '1' );   
            }               

       });

 }

J'essaie d'appeler sendCard () défini dans sendCardComponent, à partir de InputFieldComponent qui ressemble à ceci:

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

@Component({
  selector: 'app-send-card',
  templateUrl: './send-card.component.html',
  styleUrls: ['./send-card.component.css']
})

export class SendCardComponent implements OnInit {

constructor(private http : Http) { }

ngOnInit() {

}

 output = '';

 sendCard(value:string, id:number){
   this.http.post('http://localhost:5000/APIconversation/', {"val":value})
  .map(response=>response.json())
  .subscribe(
      data => {

             this.output = data.result.fulfillment.messages[1].payload.options[id].type = $('#'+(id+1)+'>span').html();  

      });
} //sendCard

}

Je reçois une erreur en appelant saro.sendCard: 

[ts] ne peut pas trouver le nom 'saro'

Qu'est-ce que je fais mal? 

angularangular-components
6
Sivvio

Créer une instance de SendCardComponent dans le InputFieldComponent 

import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';

export class InputFieldComponent{

    //your other variables and methods

    constructor(private http : Http) { }

    let saro = new SendCardComponent(this.http);

    saro.sendCard()

}
13
Rahul Singh

Vous avez 2 problèmes à résoudre.

La première est que si vous souhaitez utiliser l'injection de dépendance, vos composants doivent avoir une relation parent-enfant. Ainsi, dans votre cas, si InputFieldComponent est un enfant de SendCardComponent, vous pouvez utiliser une injection de dépendance simple (constructeur) pour obtenir une instance du parent SendCardComponent à partir de InputFieldComponent.

Et cela nous amène à la deuxième question - la mise en œuvre. Si je voulais faire ce qui précède, je finirais avec:

export class InputFieldComponent implements OnInit {

  value = '';
  output = '';

  constructor(private http : Http, private saro: SendCardComponent) { }

  onEnter(value: string) { 

    this.value = value;
    this.saro.methodOnSendCardComponent();  
    ......

Si l'autre relation existait - InputFieldComponent étant le parent de SendCardComponent, vous pouvez utiliser @ViewChild pour obtenir votre instance de SendCardComponent à partir de InputFieldComponent.

Cependant , comme indiqué, les deux méthodes ci-dessus nécessitent de modifier la hiérarchie des vues. Si les deux composantes doivent BESOIN de rester frères, aucun des éléments ci-dessus ne fonctionnera.

En y réfléchissant davantage, cependant, si vous avez seulement besoin d'accéder à SendCardComponent pour utiliser une logique (c'est-à-dire des méthodes), pourquoi ne pas abstraire cette logique à un service et vous pouvez ensuite utiliser ce service n'importe où dans votre hiérarchie? Cela contourne parfaitement votre problème actuel et constitue en général un conseil judicieux. Honnêtement, vos composants devraient concentrer leur comportement sur les préoccupations de niveau supérieur et «externaliser» autant qu'ils le peuvent raisonnablement de toute façon.

2
snorkpete