angular 4: 从不同的组件调用方法

Question

我有 2 个同级组件，我在一个组件中执行 http 请求，如果发生特定情况，它应该发出另一个 http 请求，写在另一个组件中。所以我应该能够在第一个组件中调用该方法。

这是第一个组件：

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

       });

 }

我正在尝试从如下所示的 InputFieldComponent 调用 sendCardComponent 中定义的 sendCard()：

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] cannot find name 'saro'

我做错了什么？

Answer 1

在 InputFieldComponent 中创建 SendCardComponent 实例

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

}

Answer 2

您有 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 从 [=11] 获取 SendCardComponent 的实例=].

但是，如前所述，上述两种方法都需要您更改视图层次结构。如果这两个组件需要保持兄弟姐妹的身份，那么以上都行不通。

不过仔细想想，如果你只需要访问 SendCardComponent 来使用它的逻辑（即方法），为什么不将该逻辑抽象为一个服务，然后你就可以在任何地方使用该服务你的等级制度？这非常巧妙地绕过了您当前的问题，并且通常是合理的建议。老实说，您的组件应该将它们的行为集中在更高级别的问题上，并且 'outsource' 尽可能多地为服务提供合理的服务。

angular 4: 从不同的组件调用方法

angular 4: call a method from a different component

angular-components

angular