在Angular 8中，如何将函数从父级传递给嵌套较深的子级，并在传递的函数中使用@input值

Question

在这种情况下，我有三个组件：

-OuterComponent
--MiddleComponent
---InnerComponent

我需要通过MiddleComponent将函数从OuterComponent传递给InnerComponent。

值得一提的是，我需要传递的函数确实需要输入：DoSomething(node)

我不知道它是否相关，但我已经将一个NodeTree从OuterComponent传递到MiddleComponent，然后我将NodeTree拆包到一个Node中，并将其传递到InnerComponent。这个节点是我需要用作正在传递的函数的输入的。

因此，我需要能够使用@Input作为传递给InnerCompenent的函数的输入，我认为它需要是@output。

Answer 1

方法1：您可以使用@Output从子组件(InnerComponent(调用父组件函数(OuterComponent(。

外部组件HTML:

<MiddleComponent (updateOuterComponent)="parentFunction($event)" />

外部组件TS:

export class OuterComponent implements OnInit {
constructor() {}
ngOnInit() {}
parentFunction(para) {
console.log(para);
// operations you want to do in parent component
}
}

MiddleWare HTML:

<InnerComponent (updateMiddleComponent)="middleFunction($event)" />

MiddleComponent TS:

export class MiddleComponent implements OnInit {
@Output() updateOuterComponent = new EventEmitter();
constructor() {}
ngOnInit() {}
middleFunction(para) {
this.updateOuterComponent.emit(para);
}
}

内部组件HTML：它可以是任何你想写

内部组件TS:

export class InnerComponent implements OnInit {
@Output() updateMiddleComponent = new EventEmitter();
constructor() {}
ngOnInit() {}
updateMiddleAndParent(para) {
this.updateMiddleComponent.emit(para);
}
}

一旦使用发射器从内部组件调用updateMiddleAndParent函数，就会触发MiddleComponent中的middleFunction。触发middleFunction后，类似的middleFunction会在发射器的帮助下触发parentFunction。

方法2：您需要创建一个服务并使用它来调用父函数：

数据服务：

import {BehaviorSubject} from "rxjs/BehaviorSubject"
export class DataService {
private state$ = new BehaviorSubject<any>('initialState');
changeState(myChange) {
this.state$.next(myChange);
}
getState() {
return this.state$.asObservable();
}
}

在InnerComponent和OuterComponent中调用DataService：在OuterComponent调用DataService和调用getState()中，只要值发生变化，就会返回一个可观察的值。您可以使用可观察响应中传递的数据执行任何函数。

在InnerComponent中，调用DataService并使用changeState()来更改值。

一旦在DataService中更改了值，那么在父组件中，该值将随着订阅observable而更改。您将从中获得更新的数据，您可以调用父组件中的任何函数。