【发布时间】：2016-12-29 08:45:31
【问题描述】：
我使用universal-starter 作为主干。
当我的客户端启动时，它会从 localStorage 中读取有关用户信息的令牌。
@Injectable()
export class UserService {
foo() {}
bar() {}
loadCurrentUser() {
const token = localStorage.getItem('token');
// do other things
};
}
一切正常，但是由于服务器渲染，我在服务器端（终端）得到了这个：
异常：ReferenceError：localStorage 未定义
我从ng-conf-2016-universal-patterns 得到了使用依赖注入来解决这个问题的想法。但是那个演示真的很老了。
假设我现在有这两个文件：
main.broswer.ts
export function ngApp() {
return bootstrap(App, [
// ...
UserService
]);
}
main.node.ts
export function ngApp(req, res) {
const config: ExpressEngineConfig = {
// ...
providers: [
// ...
UserService
]
};
res.render('index', config);
}
现在他们使用相同的 UserService。谁能给出一些代码来解释如何使用不同的依赖注入来解决这个问题？
如果有其他更好的方法而不是依赖注入，那也很酷。
更新 1 我正在使用 Angular 2 RC4，我尝试了 @Martin 的方式。但即使我导入它，它仍然在下面的终端中给我错误：
终端（npm start）
/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240 抛出新的reflective_exceptions_1.NoAnnotationError(typeOrFunc, params); ^ 错误：无法解析“UserService”（Http，？）的所有参数。确保所有参数都用 Inject 或 具有有效的类型注释，并且 'UserService' 装饰有 可注射。
终端（npm run watch）
错误 TS2304：找不到名称“LocalStorage”。
我猜它与angular2-universal 中的LocalStorage 以某种方式重复（虽然我没有使用import { LocalStorage } from 'angular2-universal';），但即使我尝试将我的更改为LocalStorage2，仍然无法正常工作。
同时，我的 IDE WebStorm 也显示为红色：
顺便说一句，我找到了import { LocalStorage } from 'angular2-universal';，但不知道如何使用它。
UPDATE 2，我改成（不知道有没有更好的办法）：
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { LocalStorage } from '../../local-storage';
@Injectable()
export class UserService {
constructor (
private _http: Http,
@Inject(LocalStorage) private localStorage) {} // <- this line is new
loadCurrentUser() {
const token = this.localStorage.getItem('token'); // here I change from `localStorage` to `this.localStorage`
// …
};
}
这解决了 UPADAT 1 中的问题，但现在我在终端出现错误：
异常：TypeError：this.localStorage.getItem 不是函数
【问题讨论】：
-
这可能是因为旧的浏览器版本不支持本地和会话存储 afaik
-
另外，隐私浏览中的 Safari 已禁用
localStorage- 在使用前应始终检查它是否存在。 -
感谢您的帮助。它在客户端运行良好，现在我想在服务器端停止服务器渲染。
-
您的 local-storage.ts 文件的导入路径是否正确？
-
@Martin 是的，我确信它是正确的，这就是为什么
import { LocalStorage } from 'angular2-universal';显示灰色（灰色表示未使用）。如果路径错误，它也会显示红色
标签： angular typescript local-storage angular2-universal