Как передать функцию от родителя глубоко вложенному дочернему элементу и использовать значение @input в переданной функции в Angular 8?

Question

У меня есть 3 компонента в этой ситуации:

-OuterComponent
--MiddleComponent
---InnerComponent

Мне нужно передать функцию из OuterComponent в InnerComponent через MiddleComponent.

Важно отметить, что функция, которую мне нужно pass принимает входные данные: DoSomething(node)

Я не знаю, актуально ли это, но я уже передаю NodeTree из OuterComponent в MiddleComponent, а затем распаковываю NodeTree в Node и передаю его Внутренний компонент. Этот узел - это то, что мне нужно использовать в качестве входных данных для передаваемой функции.

Итак, мне нужно иметь возможность использовать @Input в качестве входа для функции, передаваемой в InnerCompoenent, который, как я предполагаю, должен быть @ output.

Answer 1

Метод 1. Вы можете вызвать функцию родительского компонента (OuterComponent) из дочернего компонента (InnerComponent) с помощью @ Output.

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 функцию из внутреннего компонента с помощью эмиттера, это вызовет middleFunction в MiddleComponent. После запуска 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();
    }
}

вызов DataService как в InnerComponent, так и в OuterComponent: в вызове DataService OuterComponent и вызове getState() это будет возвращать наблюдаемое всякий раз, когда значение изменяется, вы можете любую функцию, использующую данные, переданные в наблюдаемом ответе.

В InnerComponent вызовите DataService и используйте changeState() для изменения значения.

после того, как значение будет изменено в DataService, тогда в родительском компоненте значение будет изменено по мере того, как вы подписаны на наблюдаемое, вы будете получить обновленные данные оттуда, вы можете вызвать любую функцию в родительском.