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 { }

如何在每条路线上加载角度2 app，然后在客户端完全操作而不清除服务数据或在路线更改时重新加载页面？

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

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

Answer 1

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

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

原始回答：

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

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

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

1 个答案: