Я использую 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, которая использует Dependency Injection для решения этой проблемы. Но эта демонстрация действительно старая.
Скажем, у меня есть эти два файла:
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)
/мой-проект/node_modules/@angular/core/src/di/reflective_provider.js:240 throw new reflective_exceptions_1.NoAnnotationError(typeOrFunc, params); ^ Ошибка: не удается разрешить все параметры для "UserService" (Http,?). Убедитесь, что все параметры украшены вводом или имеют действительные аннотации типов и что "UserService" украшен Вводимый.
Терминал (просмотр в режиме npm)
ошибка TS2304: Не удается найти имя "LocalStorage".
Я думаю, что он каким-то образом дублируется с LocalStorage
от angular2-universal
(хотя я не использую import { LocalStorage } from 'angular2-universal';
), но даже я пытался изменить мой на LocalStorage2
, все еще не работает.
И тем временем мой IDE WebStorm также показывает красный цвет:
Кстати, я нашел import { LocalStorage } from 'angular2-universal';
, но не знаю, как это использовать.
ОБНОВЛЕНИЕ 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 не является функцией