angular - 在 Angular 2 的路由器中获取对当前路由组件的引用？

Question

有没有一种干净的方法来获取对当前路由组件的引用？

这似乎行得通，但似乎很老套:

 this.router.currentInstruction.
  component.componentType.prototype.somePropertyOrFunction();

Answer 1

事实上，您无权使用表达式访问与当前路由关联的组件实例。您只能获得组件类型。这就是为什么您需要使用原型(prototype)但您获得了对函数的引用而不是对组件实例的方法的引用。

主要结果是 this 关键字(如果在方法中使用)将是未定义的。

要访问与当前路由关联的组件实例，您可以利用 OnActivate Hook 接口(interface)在路由激活时将此实例设置为共享服务:

@Component({
  selector: 'some-cmp',
  template: `
    <div>routerOnActivate: {{log}}</div>
  `})
  export class SomeCmp implements OnActivate {
    constructor(private service:RouteStateService) {
    }

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
      this.service.setCurrentRouteComponent(this);
    }
 }

然后您就可以通过这种方式访问​​组件实例:

var component = this.service.getCurrentRouteComponent();