Angular 在父级中调用方法并从子级获取返回值

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

在parent.html中

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

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

我收到一个错误。这个.config不是一个函数

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

在parent.html中

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

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

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

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

当您希望将值从子级传递到父级时，通常使用EventEmitter。不从父代传递到子代

因此，您可以直接从parent.ts获取值

在本例中，这个值的格式是前面提到的Val

在child.ts中

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

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

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

---

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

父组件TS

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

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

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

在您的ChildComponent.ts中

在ChildComponent.html中

---

你为什么要这样做？getConfig方法返回一个配置并将其发送给子对象，为什么要获取该函数？您需要获取配置文件。我之所以需要这样做，是因为以下几点：子对象订阅了一个可观察对象。触发后，子级将获得一组新的配置。。这个新的配置集是父项对原始配置进行格式化的结果。另外，我不想让子项知道配置是如何格式化的。它只需要通过调用这个函数来获取配置。我也不希望父级触发子级中的方法。如果配置仅在子级中触发，为什么要从父级发送？以父级格式触发可观察数据并将其发送给子级。子组件是可重用的。例如，父组件有一个包含多个子组件的网格列表。触发可观察对象时，这些子组件应该能够重新加载其数据。但它们需要从父级获取配置。我不想让孩子知道如何格式化这个配置，他们只需要从家长那里得到最新的配置。如果我只是将其发送给child，我将如何告诉该child重新加载其数据？该child订阅了一个可观察的。触发后，子级将获得一组新的配置。。这组新配置是父配置在原始配置上进行格式化的结果。所以这个配置总是会改变的。你的答案只是把配置传递给孩子，这不是我需要的。你能分享一个订阅和可观察的东西的代码吗？我不太明白你到底想要什么。简单地将配置传递给子级并不重要。简单就是好。如果要在父操作时将值从父级传递给子级。您可以使用parent.ts@iPhoneJavaDev中的observable传递该值

constructor(public parentComponent: ParentComponent) {}

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