角度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：从不同的组件调用方法

回答

相关问题