Question

在Angular 2中，我在app.module.ts中定义了我的路线：

const appRoutes: Routes = [
  { 
    path: '',
    component: HomeComponent,
  },
  {
    path: 'admin',
    component: AdminComponent,
  }
];

我还有一个显示菜单和搜索表单的app.component。此app.component连接到服务（events.service.ts），该服务返回events数组。提交搜索表单后，app.component会调用服务来过滤事件，然后抓取它们：

getEvents(): void {
    this.eventsService.getEvents().then(events => {this.events = events});
}

onSubmit() {
    this.searchTerm = this.model.searchTerm;
    this.eventsService.search(this.searchTerm).then(res => this.getEvents());
}

我希望能够将this.events从app.component传递到app.module（home和admin）中指定的两条路线。

我的home.component.ts需要相同的events.service.ts，并在onNgInit函数中抓取其中的事件，但是当通过{{1}中的搜索更新了服务中的事件时} app.component.ts初始化中抓取的事件已过时。我希望他们能够同步。

Answer 1

您无法直接传输数据＆＃34;输入＆＃34;到路线。放置在＆＃34;另一侧的组件。 <router-outlet>在模板中不可见，因此＆＃34;输入＆＃34;的概念在这种情况下不适用。

路由器的想法是在路由中尽可能多地编码应用程序状态。当然，您可以实现某种缓存，以避免在合理的时间内对您希望保持相同资源的多个请求。

当然，并非所有数据都可以通过路线传输。例如，您通常只为实体编写某种标识，然后使用HTTP根据从路径读取的ID来减少更多数据。

也就是说，您可以将数据保存在服务中。从您的组件中，将一些数据保存在您注入的服务实例中。由于服务是单例，当您在用作子路由的组件中注入相同的服务时，您将从父路由中放置数据。

// componentA
this.service.data = data; // from http request, for example

// componentB
this.data = this.service.data;

当然，根据上述操作的时间，可能会发生组件B中的代码在组件A中的代码之前执行，这意味着您将从undefined中获取Service#data。如果异步提取data，这种情况尤其常见，这通常是HTTP请求的情况。

为此，您可以使用observables，可能是BehvaiorSubject，以便在您订阅时获取数据。

// service
data$ = new BehaviorSubject<T>(null) // initial value as arg

// component A
this.service.data$.next(data) // from http request, for example

// component B
this.service.data$.subscribe(data => this.data = data)

现在，只要在组件A中提取数据，组件B中的数据就会更新，尽管单例服务中的data$可观察值将在两个组件中注入。

请务必取消订阅，但您也可以在Angular中使用async管道。在这种情况下，Angular将为您处理取消订阅，在大多数情况下，这是在Angular中使用observable的首选方式。

通过路由器将输入传递给Angular组件

1 个答案: