Angular 2 调试 - 什么事件导致 angular 2 服务清除所有数据？

Question

app.component.ts 是空白的，html 只是呈现我的主体组件。我将服务注入到其他一些组件中，这些组件的模板呈现在 body-components template/router-outlet 中。

在我的服务中，我使用 http 从服务器获取数据：

fetchData() {
  return this.http.get(this.url + 'events')
    .map((response: Response) => response.json());

在我的组件中，如果我的服务不包含数据，我会发出获取数据的请求，但即使在加载数据后更改路由时，它也始终未定义：

    constructor (private router:Router,
               private activatedRoute: ActivatedRoute,
               private eventService: EventService,
               private authService: AuthService) {

  ngOnInit() {
    if (this.eventService.events == undefined) {
      this.eventService.fetchData()
        .subscribe(
          data => {
            this.events.sort(function (a, b) {
              let x = new Date(a['date']);
              let y = new Date(b['date']);
              return x < y ? -1 : x > y ? 1 : 0;
            });
            this.eventService.setEvents(data);
            this.events = data;
            // localStorage.setItem('events', JSON.stringify(this.events));
            // localStorage.setItem('eventRefresh', String(new Date()));
          });
    }
    else {
        this.events = this.eventService.getEvents();
    }
  }

我的路线：

const APP_ROUTES: Routes = [
    {path: 'users/login/:', component: AuthComponent},
    {path: 'tickets', component: SellTicketComponent},
    {path: 'tickets:', component: SellTicketComponent},
    {path: 'success/:', component: TicketSoldComponent},
    {path: 'profile', component: UserProfileComponent, canActivate: [SellTicketGuard]},
    {path: 'create', component: CreateeventComponent, canActivate: [GuestlistGuard]},
    {path: 'viewguests', component: ViewAttendingComponent, canActivate: [GuestlistGuard]},
    {path: 'termsofuse', component: PopupComponent},
    {path: 'terms', component: PopupComponent, canActivate: [SellTicketGuard]},
    {path: '**', redirectTo: '', pathMatch: 'full'} // wildcard. Could make a 404 page.

app.module.ts:

//Services:
import { EventService } from './services/event.service';
import { AuthService } from "./services/auth.service";
@NgModule({
  declarations: [...
  ],
  imports: [
    BrowserModule,
    RouterModule,
    routing,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [EventService, AuthService, CreateEventGuard, SellTicketGuard, GuestlistGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

如何让 angular 2 应用程序加载每条路线，然后完全在客户端运行，而无需清除服务数据或在路线更改时重新加载页面？

这是一个广泛的问题，因为我不知道问题是什么 - angular 2 个应用程序事件导致 angular 服务清除所有 data/variable 属性价值观？每当我导航到我的根路由时，我的两个服务中的所有数据都会被清除，并且必须从服务器重新获取，因为所有服务变量都是未定义的。

总结一下我的情况：我在 app.module.ts 中提供我的服务，将它们导入我的各个组件并将它们注入到它们的构造函数中。我有一个 angular 2 单页应用程序，当我在导航栏上使用 this.router.navigate 或 routerLink 绕过我的应用程序组件时，所有内容都从同一页面上的一个路由器出口或组件特定出口呈现，每次它清除我存储在我的服务中的数据，特别是一组 JSON 对象，它再次呈现一个组件并执行它的 ngOnInit 检查服务中是否有数据，因为没有' 它再次从数据库中提取数据。我希望这些数据能够持久保存，这样客户端就不会每 2 秒就为相同的数据访问我的服务器，我如何在不使用 localStorage 的情况下实现这一点？某种延迟加载会这样做吗？

Answer 1

编辑： 通过提供的代码和评论中的其他见解，我们可以放心地得出结论，这不是注入器问题，而是路由器问题，因为某些路由正在完全重新加载页面并更新注入器中的服务实例。

用 router.navigate 函数替换 routerLink 指令解决了问题。

原回答：

好吧，由于您没有提供任何代码，我将大胆猜测您是在组件 providers 列表中声明服务。这将导致注入器在每次初始化该组件时创建一个新的服务实例。

注入器树映射组件树，这意味着每个组件都有自己的注入器，将覆盖父注入器。因此，为了拥有单例服务，您只需要在 root 节点（模块）中声明该服务。

Angular 2 调试 - 什么事件导致 angular 2 服务清除所有数据？

Angular 2 debugging - What events cause angular 2 services to clear out all their data?

angular

angular2-routing

angular2-services