作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
每次我从 MainComponent
导航到 TestListComponent
时,都会触发 TestListComponent 构造函数并创建 ObservableService
的新实例。当我单击链接时,控制台会显示重复的消息。也许是 Angular 问题,有帮助吗?
main.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MainRoutingModule} from "./main-routing.module";
import {MainComponent} from './main.component';
import {ObservableService} from "../../core/services/observable.service";
@NgModule({
imports: [
BrowserModule,
MainRoutingModule,
],
declarations: [MainComponent],
providers: [ObservableService],
bootstrap: [
MainComponent
]
})
export class MainModule { }
main.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
{ path: 'tests', loadChildren: 'angular/app/modules/test-list/test-list.module#TestListModule'},
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class MainRoutingModule {}
observable.service.ts
import { Injectable } from '@angular/core';
import {Subject} from "rxjs/Rx";
import 'rxjs/add/operator/map'
@Injectable()
export class ObservableService {
// Observable string sources
private changeLanguageStatus = new Subject<Object>();
// Observable string streams
changeLanguageStatus$ = this.changeLanguageStatus.asObservable();
constructor(){}
/**
* Change language event
* @param params
*/
changeLanguageEvent(params: Object){
this.changeLanguageStatus.next(params);
}
}
test-list.module.ts
import { NgModule } from '@angular/core';
import {TestListComponent} from "./test-list.component";
@NgModule({
declarations: [
TestListComponent
]
})
export class TestListModule {}
test-list.component.ts
import {Component} from '@angular/core';
import 'rxjs/Rx';
import {ObservableService} from "../../core/services/observable.service";
@Component({
moduleId: module.id,
selector: 'st-test-list',
templateUrl: 'test-list.component.html'
})
export class TestListComponent {
constructor(private observableService:ObservableService) {
observableService.changeLanguageStatus$.subscribe(
data => {
console.log('Test', data);
});
}
}
main.component.ts
import {Component, ViewChild} from '@angular/core';
import 'rxjs/Rx';
import {ObservableService} from "../../core/services/observable.service";
@Component({
moduleId: module.id,
selector: 'st-main',
templateUrl: 'main.component.html'
})
export class MainComponent {
constructor(private observableService:ObservableService) {}
changeLanguage(lang){
this.observableService.changeLanguageEvent({type: lang});
}
}
main.component.html
<a href="" (click)="changeLanguage('en')"></a>
<!--Dynamic content-->
<router-outlet></router-outlet>
最佳答案
当您通过路由导航到一个组件时,它会被创建,而当您导航回来时,它会被销毁,这应该是预期的行为。据我所知,您遇到此问题是因为您正在创建所谓的 Infinite Observable,即您正在订阅它并等待事件流,在您的情况下更改语言。因为您永远不会取消订阅您的 Observable,所以订阅它的函数对于您的组件的每个新实例都保持事件状态。因此,rxjs 不会处理您的订阅,您必须自己处理。
首先,我建议您阅读有关生命周期 Hook 的内容。查看 OnInit 和 OnDestroy 生命周期 Hook 。
使用 ngOnInit 订阅你的 Observable 并使用 ngOnDestroy 取消订阅:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
@Component({ .... })
export class TestListComponent implements OnInit, OnDestroy
{
private _languageSubscription : Subscription;
ngOnInit(): void
{
this._languageSubscription = observableService.changeLanguageStatus$.subscribe(
data => {
console.log('Test', data);
});
}
ngOnDestroy() : void
{
this._languageSubscription.unsubscribe();
}
}
我希望这能解决您的问题。
关于javascript - 懒加载模块每次加载都会创建父服务的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42476439/
我是一名优秀的程序员,十分优秀!