angulaire 4: appel d'une méthode à partir d'un autre composant

J'ai 2 frère de composants, je suis en train de faire une requête http dans un composant, et si l'une de ces conditions se produit, il convient de faire une autre requête http, écrit dans un autre composant. Je devrais donc être en mesure d'appeler la méthode au sein de la première composante.

c'est la première composante: 

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

       });

 }

Je suis en train d'appeler sendCard() définie dans sendCardComponent, 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

}

J'obtiens une erreur lors de l'appel de saro.sendCard:

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

Ce que je fais mal?

Vous aurez besoin pour accéder à votre SendCardComponent instance à l'aide de this.saro

OriginalL'auteur Sivvio | 2017-07-19

  1. 13

    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()

}
    grand il a travaillé. Merci beaucoup
    C'est l'appel de la méthode, mais la Vue n'est pas en train d'actualisation. Est-il de toute façon je peux mettre à jour la Vue ?

    OriginalL'auteur Rahul Singh

  2. 2

    Vous avez 2 problèmes à résoudre.

    La première est que si vous voulez utiliser l'Injection de Dépendance, votre besoin d'avoir une relation parent-enfant. Donc, dans votre cas, si InputFieldComponent est un enfant de SendCardComponent, alors vous pouvez utiliser simple (constructeur) d'injection de dépendance pour obtenir une instance de la mère SendCardComponent de la InputFieldComponent.

    Et cela nous amène à la deuxième question - la mise en œuvre. Si je voulais faire de la ci-dessus, puis 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 existe - où InputFieldComponent est un parent de SendCardComponent, alors vous pouvez utiliser @ViewChild pour obtenir votre instance de SendCardComponent de InputFieldComponent.

    Cependant, comme l'a noté, à la fois des méthodes ci-dessus vous obliger à modifier votre point de vue de la hiérarchie. Si les deux composants DOIVENT rester que des frères et sœurs, ni de ces travaux.

    Réflexion plus loin cependant, si vous avez seulement besoin d'avoir accès à SendCardComponent utiliser la logique (méthodes) de celui-ci, pourquoi ne pas abstraite que la logique d'un service, et vous pouvez ensuite utiliser ce service n'importe où dans votre hiérarchie? Cela contourne votre problème assez facilement, et est de bons conseils en général. Honnêtement, vos composants doivent concentrer leur comportement sur le niveau plus élevé des préoccupations et des ğ externaliser ğ autant que ce qui est raisonnablement possible pour les services de toute façon.

    OriginalL'auteur snorkpete