Можете ли вы использовать @ViewChild() или подобное с роутером? Как если так?

Question

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

Like:
<router-outlet></router-outlet>

NOT:
<selector-name></selector-name>

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

Например, я попробовал это:

export class RequestItemCatsComp {
    @ViewChild('child') child: RequestItemsComp;
    ***etc...***
ngAfterViewInit() {
    if (this.child) // Always child is undefined
        this.groupId = this.child.groupId;
    }
}

Но, естественно, ребенок не определен, потому что это неправильный путь. Есть ли правильный путь?

Я пытаюсь использовать службу для обмена данными, но затем сталкиваюсь с другой проблемой "выражение изменилось после того, как она была проверена", которую я надеюсь исправить без взлома или включения режима prod.

Answer 1

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

выдержка из документов RouterOutlet

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

пример

 @Component({
  selector: 'my-app',
  template: `<h3 class="title">Basic Angular 2</h3>
  <router-outlet (activate)="onActivate($event)" ></router-outlet>
  `
})
export class AppComponent {
  constructor(){}

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

@Component({
  selector: 'my-app',
  template: `<h3 class="title">Dashboard</h3>
  `
})
export class DashboardComponent {
  constructor(){}

  sayhello(){
    console.log('hello!!');
  }
}

Вот Плункер!

Надеюсь это поможет!!

Answer 2

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

На маршрутизаторе есть свойство только для чтения, содержащее текущий компонент.

пример:

 @Component({
  selector: 'my-app',
  template: `<h3 class="title">Basic Angular 2</h3>
  <button (click)="identifyYourself()"></button>
  <router-outlet></router-outlet>
  `
})
export class AppComponent {
  @ViewChild(RouterOutlet) outlet;
  constructor(){}

  identifyYourself() {
    if (outlet && outlet.component) {
      outlet.component.identify();
    }
  }
}

@Component({
  selector: 'my-app',
  template: `<h3 class="title">Dashboard</h3>
  `
})
export class DashboardComponent {
  constructor(){}

  identify(){
    console.log('Hello, I'm the dashboard!');
  }
}