在父级调用方法并从子级获取返回值答案

【问题标题】：Call method in parent and get return value all from child在父级调用方法并从子级获取返回值
【发布时间】：2019-05-11 01:04:48
【问题描述】：

我的目标是，从子组件中，我想在父组件中调用一个方法并获取返回值。我尝试了以下方法，但没有成功。

在 parent.html 中

<child-component [config]="getConfig(data)"></child-component>

在 parent.ts 中

data = <some data>
...
getConfig(val) {
    // format value and return
    return formattedVal;
}

在 child.ts 中

@Input() config: Function
...
retrieve() {
    const conf = this.config();
}

我收到一个错误“this.config 不是函数”

另外，我尝试使用 EventEmitter，但这一次，它返回“未定义”

在 parent.html 中

<child-component (config)="getConfig(data)"></child-component>

在 child.ts 中

@Output() config = new EventEmitter();
...
retrieve() {
    const conf = this.config.emit;
}

【问题讨论】：

为什么要这样做？您的 getConfig 方法返回一个配置并将其发送给孩子，您为什么要获取该功能？您需要获取配置。 stackblitz.com/edit/angular-dgt2xf
我需要这样做，因为以下原因：孩子订阅了一个 observable。当它被触发时，孩子会得到一组新的配置。这组新的配置是父级对原始配置进行格式化的结果。
另外，我不希望孩子知道配置的格式。它只需要通过调用这个函数来获取配置。我也不希望父母触发孩子的方法。
如果配置只是在子节点中触发，为什么要从父节点发送？以父格式触发可观察数据并将其发送给子。
子组件是可重用的。例如，父组件有一个网格列表，其中包含多个此类子组件。当 observable 被触发时，这些子组件应该能够重新加载它们的数据。但他们需要父母的配置。我不希望孩子知道如何格式化这个配置，他们只需要从父母那里获取最新的配置。如果我只是将它发送给孩子，我将如何告诉孩子重新加载其数据？

标签： angular

【解决方案1】：

将ParentComponent注入ChildComponent并调用如下函数：

在你的ChildComponent.ts，

constructor(public parentComponent: ParentComponent) {}

在你的ChildComponent.html，

<child-component [config]="parentComponent.getConfig(data)"></child-component>

【讨论】：

【解决方案2】：

基本上你想要做的就是将一个函数传递给一个孩子并用它做任何事情。因此，例如，从父组件中，您有一个“returnRandom”函数，该函数返回一个随机数，其上限是用户传递给该函数的内容，但遗憾的是，您可能需要将数据放入全局范围。

父组件 TS

import { Component } from '@angular/core';

const parentGlobalVar = 10;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  parentLocalVar = 0;


  public returnRandom(max: number): number {
    console.log(parentGlobalVar); // logs '10'
    console.log(this.parentLocalVar); // logs 'undefined'
    return Math.floor(
      Math.random() * max + 1
    );
  }

}

然后将函数传递给html标签处的子组件

<app-child [parentFn]="returnRandom"></app-child>

然后将函数调用到子组件并从中做任何你想做的事情。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  @Input() parentFn: Function;

  constructor() { }

  ngOnInit() {
    console.log(this.parentFn( 100 ));
  }

}

【讨论】：

【解决方案3】：

您将配置定义为Function，但this.config 只是formattedVal，它只是值并从parent.ts 定义

和EventEmitter 通常用于将值从子级传递给父级时。不要从父母传给孩子

所以你可以直接从parent.ts获取值

在这种情况下，这个值是formattedVal，正如我上面提到的

在 child.ts 中

@Input() config
...
retrieve() {
    const conf = this.config;
}

【讨论】：

孩子订阅了一个 observable。当它被触发时，孩子会得到一组新的配置。这组新的配置是父母对原始配置进行格式化的结果。所以这个配置总是会改变的。
您的答案只是将配置传递给孩子，这不是我需要的。
你能分享一个订阅和可观察事物的代码吗？我不明白你到底想要什么。简单地将配置传递给孩子是没有关系的。简单就好。如果您想在父操作时将值从父传递给子。你可以在parent.ts@iPhoneJavaDev 中使用the observable 传递值