如何知道组件当前是否是router-outlet中加载的组件
How to know if component is currently the loaded component in router-outlet
我有一个带有延迟加载模块的应用程序。
在一个特定的惰性加载模块中,我有一个父组件,它有 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();
}
你有一个服务,它是一个单例。该服务从申请开始到结束一直存在。
你有两个组件。这些不是单身人士。它们在必须显示在页面上时创建,在不能再显示时销毁。
并且,在创建组件时,您可以在单例服务中订阅一个可观察对象。这是什么意思?这意味着可观察对象需要保留对您的观察者的引用,它本身具有对组件实例的隐式引用 (this)。如果没有该引用,可观察对象将无法在事件发出时调用观察者。所以,即使 Angular 不再需要你的组件实例,可观察对象仍然有一个对它的引用,并在事件发出时调用它。
因此您需要在不再需要该组件时取消订阅:
private subscription: Subscription;
ngOnInit() {
this.subscription = this.service.getTestEvent().subscribe(...);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
如果不这样做,您不仅会无缘无故地调用观察者,使应用变慢,而且还会发生内存泄漏。
重点是您永远不会取消订阅该活动。
您点击用户的次数越多,您在控制台中看到的行就越多。
任何时候你点击你订阅事件,即你添加一个回调,该回调将在事件发生时随时执行,除非你取消订阅。
在方法 ngOnDestroy()
中,您应该调用订阅的 unsubscribe()
方法(这是 subscribe()
方法返回的对象)。
换句话说就是这样
subscrition: Subscription;
ngOnInit() {
this.subscription = this.service.getTestEvent().subscribe( (e) => {
console.log('HeroListComponent ==>');
});
.....
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
希望对您有所帮助。
我有一个带有延迟加载模块的应用程序。
在一个特定的惰性加载模块中,我有一个父组件,它有 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();
}
你有一个服务,它是一个单例。该服务从申请开始到结束一直存在。
你有两个组件。这些不是单身人士。它们在必须显示在页面上时创建,在不能再显示时销毁。
并且,在创建组件时,您可以在单例服务中订阅一个可观察对象。这是什么意思?这意味着可观察对象需要保留对您的观察者的引用,它本身具有对组件实例的隐式引用 (this)。如果没有该引用,可观察对象将无法在事件发出时调用观察者。所以,即使 Angular 不再需要你的组件实例,可观察对象仍然有一个对它的引用,并在事件发出时调用它。
因此您需要在不再需要该组件时取消订阅:
private subscription: Subscription;
ngOnInit() {
this.subscription = this.service.getTestEvent().subscribe(...);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
如果不这样做,您不仅会无缘无故地调用观察者,使应用变慢,而且还会发生内存泄漏。
重点是您永远不会取消订阅该活动。
您点击用户的次数越多,您在控制台中看到的行就越多。
任何时候你点击你订阅事件,即你添加一个回调,该回调将在事件发生时随时执行,除非你取消订阅。
在方法 ngOnDestroy()
中,您应该调用订阅的 unsubscribe()
方法(这是 subscribe()
方法返回的对象)。
换句话说就是这样
subscrition: Subscription;
ngOnInit() {
this.subscription = this.service.getTestEvent().subscribe( (e) => {
console.log('HeroListComponent ==>');
});
.....
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
希望对您有所帮助。