角度 4：从不同的组件调用方法

Posted 2023-03-13

【中文标题】角度 4：从不同的组件调用方法

【英文标题】：angular 4: call a method from a different component

【发布时间】：2017-12-24 13:45:21

【问题描述】：

我有 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] 找不到名称“saro”

我做错了什么？

【问题讨论】：

您需要使用this.saro 访问您的SendCardComponent 实例

【参考方案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()

【讨论】：

它正在调用该方法，但视图没有得到刷新。无论如何我也可以更新 View 吗？

@SunilPachlangia 有没有找到解决办法，我也遇到了同样的问题。

【参考方案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 从InputFieldComponent 获取您的SendCardComponent 实例。

但是，如上所述，上述两种方法都需要您更改视图层次结构。如果这两个组件需要保留为兄弟姐妹，那么上述任何一个都不起作用。

进一步考虑，如果您只需要访问SendCardComponent 即可使用其中的逻辑（即方法），为什么不将该逻辑抽象为服务，然后您可以在层次结构中的任何位置使用该服务？这非常巧妙地绕过了您当前的问题，并且总体上是合理的建议。老实说，您的组件应该将其行为集中在更高级别的问题上，并尽可能多地“外包”给服务。