Question

试图找到关于如何在路线之间传递公共对象的答案。

我有一个存储socket.io

的服务

我需要在整个网站上访问该套接字服务，以便我可以听取发出的信息。

我有一个route.ts文件，我不知道如何在根目录中初始化套接字服务，然后在需要时将其传递给路由。

我已经阅读了文档，我正在尝试在route.ts文件中使用如下数据：

const routes: RouterConfig = [

    { path: '', component: AppComponent },
    { path: 'function1', component: Function1Component, data: { socket: socket }},
];

但是我不知道在哪里声明套接字服务。

由于

Answer 1

在你的情况下，你试图从路由的data选项传递一些函数引用（它将返回object / promise / observable），因此在data中传递它是行不通的选项，因为当您通过执行this.routerData.get('socket')请求数据时，它会对数据进行字符串化。

我强烈建议您在此处使用resolve路由选项。 resolve方法会返回promise / observable

<强>代码

@Injectable()
class SocketResolver implements Resolve {
  constructor(private socketService: socketService) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
    return this.socketService.connection();
  }
}

const routes: RouterConfig = [
    { path: '', component: AppComponent },
    { path: 'function1', component: Function1Component, 
       resolve: { socket: SocketResolver }
    }
];

Doc Link

Answer 2

你不应该涉及到这里的路由。只需创建一项服务：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

SocketService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SocketService {
  ...
}

并通过构造函数在组件或其他服务中注入该服务：

constructor(private socketService:SocketService) { }

另外，请确保您的服务在引导过程中初始化：

bootstrap(AppComponent, [  
    SocketService,
    ... ]);

在bootstrap上，angular将创建一个服务的单个实例，它将被注入到构造函数中包含它的每个组件中，因此您可以从任何地方访问相同的套接字服务。

Angular 2路由之间传递对象

2 个答案: