Angular 2单例服务不作为单身人士
所以我有一个名为TargetService的服务,它注入了各种其他组件.此TargetService有一个名为Targets的属性,它是Target对象的集合.
我的问题是我希望这个集合在路由到另一个视图后仍然存在.我的路由工作正常,但是一旦路由发生变化,服务就会丢失任何变量的内容,基本上,它会重新初始化服务.我的理解是这些注入的服务是可以传递的单身人士? 在下面的示例中,在TargetIndex上,单击一个按钮,该按钮填充服务上的Targets []对象(this.targetService.targets = ts;).工作正常,然后我路由到TargetShow页面,然后回到这个索引,现在这个Targets []属性是空的,当我希望它包含我已经填充的. 我在这里想念的是什么? App.Module const routes: Routes = [ { path: '',redirectTo: 'targets',pathMatch: 'full'},{ path: 'targets',component: TargetIndexComponent },{ path: 'targets/:id',component: TargetShowComponent } ] @NgModule({ declarations: [ AppComponent,TargetComponent,TargetIndexComponent,TargetShowComponent ],imports: [ BrowserModule,FormsModule,ReactiveFormsModule,HttpModule,RouterModule.forRoot(routes) ],providers: [TargetService],bootstrap: [AppComponent] }) export class AppModule { } TargetService @Injectable() export class TargetService { public targets: Target[]; constructor(private http: Http) {} getTargets(hostname: String): Observable<Target[]> { return this.http.request(`url`).map(this.extractData); } private extractData(res: Response) { let body = res.json(); return body || []; } } TargetIndex @Component({ selector: 'app-targets',templateUrl: './target-index.component.html',styleUrls: ['./target-index.component.css'],providers: [TargetService] }) export class TargetIndexComponent implements OnInit { loading = false; constructor(private http: Http,private targetService: TargetService) {} loadTargets(hostname: HTMLInputElement) { this.loading = true; this.targetService.getTargets(hostname.value) .subscribe((ts: Target[]) => { this.targetService.targets = ts; this.loading = false; }) } ngOnInit() { } } TargetShow @Component({ selector: 'app-target-show',templateUrl: './target-show.component.html',styleUrls: ['./target-show.component.css'],providers: [TargetService] }) export class TargetShowComponent implements OnInit { id: string constructor(private route: ActivatedRoute,private targetService: TargetService) { route.params.subscribe(params => { this.id = params['id']; }) } ngOnInit() { } }
尝试从组件提供程序中删除TargetService,因为您已将其添加到模块提供程序中.将此服务添加到组件提供程序时,DI会创建它的新实例.
这是https://angular.io/docs/ts/latest/guide/dependency-injection.html的引用:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |