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

Question

在这种情况下，我有3个组成部分：

-OuterComponent
--MiddleComponent
---InnerComponent

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

重要的是，我需要传递的函数确实需要输入：DoSomething(node)

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

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

Answer 1

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

OuterComponent HTML：

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

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

}

InnerComponent HTML：可以是您要编写的任何内容

InnerComponent 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：您需要创建一个服务并使用它来调用父函数：

DataService：

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中更改了值，然后在父Component中，当您订阅了Observable时，该值就会更改。您将从那里获取更新的数据，可以在父级中调用任何函数。