如何知道组件当前是否是router-outlet中加载的组件

Question

我有一个带有延迟加载模块的应用程序。

在一个特定的惰性加载模块中，我有一个父组件，它有 router-outlet.

在那个父组件中，我有一个按钮，它基本上使用共享服务（在延迟加载模块上提供）发出一个事件。

每个子组件（在 router-outlet 中加载）都使用相同的共享服务订阅该事件！

我尝试使用 heroes demo.

在以下 plunkr 中重新创建我的用例

打开开发工具以查看 console 条消息。

点击Heroes Link（应该默认选中）。
点击列表中的英雄物品。
单击 Admin Link。
单击 Emit Test 按钮（右上导航）

您会在控制台中看到两个组件都收到了事件，即使两个组件都不应该是“Active”！！！

1) 这是设计使然吗？

2)如何知道当前的Component是不是active的？

SUMMARY/UPDATE

根据我的理解，EventEmitter/Subject 可以订阅多次，但取消订阅后您不能使用 it/subscribe AFAIK。

我的解决方案是：

1) 在服务中我结束了以下操作：

get(){
  if (!this.testEvent.closed) {
      this.testEvent.complete();
      this.testEvent.unsubscribe();
    }
    this.testEvent= new EventEmitter<void>();
    return this.testEvent;
  }
}

2) 在我订阅事件的每个组件中，我添加了 ngDestroy 并取消订阅了事件：

  ngOnDestroy() {
    this.testEvent.unsubscribe();
  }

Answer 1

你有一个服务，它是一个单例。该服务从申请开始到结束一直存在。

你有两个组件。这些不是单身人士。它们在必须显示在页面上时创建，在不能再显示时销毁。

并且，在创建组件时，您可以在单例服务中订阅一个可观察对象。这是什么意思？这意味着可观察对象需要保留对您的观察者的引用，它本身具有对组件实例的隐式引用 (this)。如果没有该引用，可观察对象将无法在事件发出时调用观察者。所以，即使 Angular 不再需要你的组件实例，可观察对象仍然有一个对它的引用，并在事件发出时调用它。

因此您需要在不再需要该组件时取消订阅：

private subscription: Subscription;

ngOnInit() {
    this.subscription = this.service.getTestEvent().subscribe(...);
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

如果不这样做，您不仅会无缘无故地调用观察者，使应用变慢，而且还会发生内存泄漏。

Answer 2

重点是您永远不会取消订阅该活动。您点击用户的次数越多，您在控制台中看到的行就越多。任何时候你点击你订阅事件，即你添加一个回调，该回调将在事件发生时随时执行，除非你取消订阅。在方法 ngOnDestroy() 中，您应该调用订阅的 unsubscribe() 方法（这是 subscribe() 方法返回的对象）。

换句话说就是这样

subscrition: Subscription;

ngOnInit() {

    this.subscription = this.service.getTestEvent().subscribe( (e) => {
      console.log('HeroListComponent ==>');
    });

.....

}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

希望对您有所帮助。

如何知道组件当前是否是router-outlet中加载的组件

How to know if component is currently the loaded component in router-outlet

angular

angular2-routing

eventemitter

SUMMARY/UPDATE