Angular 您可以将@ViewChild（）或类似工具用于路由器插座吗？如果是，怎么办？

我反复遇到这样的情况：我想访问路由器出口另一侧的子组件，而不是选择器：

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

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

但是很自然地，孩子是未定义的，因为这是错误的方式。有正确的方法吗

---

我试图使用服务共享数据，但随后遇到另一个问题“表达式在检查后已更改”，我希望在没有黑客攻击或启用prod模式的情况下解决该问题。

您可以点击激活事件以获取路由器出口内实例化组件的引用

摘自

路由器出口将在任何时候启动新组件时发出激活事件 正在实例化，并且在 毁灭

示例

 @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!!');
  }
}

@组件({
选择器：“我的应用程序”，
模板：`基本角度2
`
})
导出类AppComponent{
构造函数（）{}
onActivate（组件参考）{
componentRef.sayhello（）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`仪表板
`
})
导出类仪表板组件{
构造函数（）{}
你好{
log（'hello！！'）；
}
}

这是你的电话号码

---

希望这有帮助

如果您没有重新连接到路线，则Madhu的方法有效。“激活”似乎没有在重新路由上运行

包含当前组件的路由器出口上有一个只读属性

例如：

@组件({
选择器：“我的应用程序”，
模板：`基本角度2
`
})
导出类AppComponent{
@ViewChild（RouterOutlet）插座；
构造函数（）{}
识别你自己{
if（出口和出口组件）{
（出口.部件标识为IIIdentity）.标识（）；
}
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`仪表板
`
})
导出类DashboardComponent实现IIIdentity{
构造函数（）{}
识别（）{
log（'你好，我是仪表板！'）；
}
}
接口标识{
识别：（）=>无效；
}

您可以尝试

@ViewChild（requestitemscop）child:requestitemscop。我不希望它工作（未尝试），但
@ViewChild（'child'）
仅在元素具有模板变量
#child
时工作，这对于路由组件是不可能的。使用服务在路由之间共享数据。您可以使用
setTimeout（）
解决“检查后表达式已更改”错误。看，这是个好习惯吗？您需要做额外的工作来确定哪个组件被激活？理想情况下，您可以使用服务在组件之间进行交互，这取决于您的需求。干杯谢谢经过长时间的搜索，没有关于如何基于路由器出口和子页面构建angular2多步骤表单向导的结果。这个答案是我的多选项卡表单编辑器中的一个关键原则，其中每个选项卡都是一个单独的组件/页面，但都扩展了一个公共基础。这允许我在路由器出口周围有导航和提交按钮，并将实际操作委托给页面本身。如果变量尚未到达子组件，我如何通过这种方式接收变量？例如，在子组件中，您有在ngOnInit上激发的方法getSomething。当我尝试thisHi@TjReinert时，componentRef未定义，这里的“RouterOutlet”是什么意思？它不会，因此RouterOutlet将是与“ActivatedRoute”关联的组件将被渲染的地方。当有一个组件时，它将位于outlet.component下。然后可以调用该组件上的任何方法。在您的示例中，您的视图上似乎没有idenetifyYourself方法。下面是一个给定路由的示例，如果您在“登录”路由上，那么组件将是“LoginViewComponent”。请查看此示例。把这个添加到我的答案中，我分叉了，但并没有设法做公关，所以这里用我的建议更新了这个版本。
 @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!!');
  }
}