Can you use @ViewChild() or similar with a router-outlet? How if so?

Question

I repeatedly run into a situation where I\'d like to access a child component existing on the other side of a router outlet rather than a selector:

Like:
<         


        

Answer 1

The approach by Madhu works if you are not reattaching to a route. It appears that activate does not get run on the re-route.

There is a read only property on router-outlet that contains the current component.

example:

 @Component({
  selector: 'my-app',
  template: `
Basic Angular 2
  
  
  `
})
export class AppComponent {
  @ViewChild(RouterOutlet) outlet;
  constructor(){}

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

@Component({
  selector: 'my-app',
  template: `
Dashboard
  `
})
export class DashboardComponent implements IIdentify{
  constructor(){}

  identify(){
    console.log('Hello, I'm the dashboard!');
  }
}
interface IIdentify {
    identify:()=>void;
}

See an example here Check this example out

https://stackblitz.com/edit/angular-zluvgc