角度4：從不同的組件調用方法

我有2個兄弟組件，我在一個組件中做了一個http請求，如果發生特定情況，它應該發出另一個http請求，寫入另一個組件。所以我應該可以在第一個組件中調用該方法。角度4：從不同的組件調用方法

這是第一個組件：在sendCardComponent定義

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

     }); 

}

我想打電話給sendCard（），從InputFieldComponent它看起來像這樣：

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 

}

打電話時我得到一個錯誤saro.sendCard：

[ts]找不到名字'saro'

我在做什麼錯？

來源

2017-07-19 Sivvio

你需要使用this.saro' – snorkpete

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

}

來源

2017-07-19 10:45:34

訪問你的'SendCardComponent'實例。非常感謝你 – Sivvio

它調用方法，但視圖沒有得到刷新。無論如何，我可以更新視圖以及？ –

創建SendCardComponent的情況下你有2個問題需要解決。

第一個是如果你想使用依賴注入，你的組件需要有父子關係。所以，在你的情況下，如果InputFieldComponent是SendCardComponent的孩子，那麼你可以使用簡單的（構造函數）依賴注入從InputFieldComponent獲得父SendCardComponent的實例。

這就讓我們來看第二個問題 - 實施。如果我想要做上述情況，那麼我會結束：

export class InputFieldComponent implements OnInit { 

    value = ''; 
    output = ''; 

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

    onEnter(value: string) { 

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

如果其他關係存在 - 在InputFieldComponent是SendCardComponent父母，那麼你可以使用@ViewChild從InputFieldComponent讓你的SendCardComponent實例。

但是，如上所述，，上述兩種方法都要求您更改視圖層次結構。如果兩個組件需要保持爲兄弟姐妹，那麼以上都不起作用。

通過進一步思考，如果您只需要訪問SendCardComponent以使用邏輯（即方法），爲什麼不將該邏輯抽象爲服務，然後可以在層次結構中的任何位置使用該服務？這很好地繞過了你目前的問題，並且一般而言是合理的建議。老實說，你的組件應該把他們的行爲集中在更高層次的關注點上，並儘可能地把它們「外包」到合理的服務上。

來源

2017-07-19 10:49:35 snorkpete

角度4：從不同的組件調用方法

回答

相關問題