Выходной компонент маршрутизатора доступа от родителя

У меня есть следующий корень приложения:

@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: `<button (click)="callChildFunction()">Close</button>
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }

    callChildFunction(){
        // Call myFunction() here
    }

}

И вот мой ребенок (компонент, используемый в router-outlet):

@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }

    myFunction(){
        console.log('success');
    }

}

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

Как я могу вызвать myFunction() из корня приложения?

Ответ 1

Используйте событие activate для этого. Всякий раз, когда мы загружаем компонент в розетку маршрутизатора, активируется событие активации, чтобы использовать компонент ref и вызывать соответствующий метод.

Родительский компонент

  <div class="container">
    <router-outlet (activate)="onActivate($event)"></router-outlet>
  </div>

Шаблон

  onActivate(componentRef){
    componentRef.works();
  }

Ребенок

 works(){
    console.log("works");
  }

Ответ 2

Маршрутизатор, связанный с маршрутизацией, не имеет никакого отношения к доступу к методам дочерних компонентов. Вы должны использовать @ViewChild для доступа к дочерним компонентам от родителя. Вы можете найти пример здесь

Обновление

Если вышеприведенное решение не является допустимым в вашем случае, вы можете активировать событие, чтобы получить ссылку на экземпляр компонента внутри маршрутизатора.

Из документов

Выход маршрутизатора будет выдавать событие активации в любое время, когда создается новый компонент, и деактивировать событие при его уничтожении.

Следовательно, вы можете использовать эту функцию и выполнить свою работу. Вы можете увидеть подробный ответ здесь, и плукер прилагается в том же самом ответе

Ответ 3

Небольшое дополнение к @Rahul Singh отличный ответ:

Убедитесь, что вы проверили, какой экземпляр компонента возвращается в
(оставаясь на примере Рахула) onActivate(componentRef),
и только вызов works(), если этот компонент действительно имеет такой метод.

Пример:

     onActivate(componentRef){
       if(componentRef instanceof ChildWithWorksMethodComponent){
         componentRef.works();
         return;
         }
         console.log("This is not the ChildWithWorksMethodComponent");
      }

В противном случае, каждый раз, когда вы переходите к маршруту, компонент которого не имеет такого метода, ваш журнал консоли будет полон ошибок, таких как:

ОШИБКА TypeError: componentRef.works не является функцией