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

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

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

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

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

Ответ 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!!');
  }
}

Вот Plunker!!

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

Ответ 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!');
  }
}