Angular 2, связь между двумя приложениями, работающими на одной странице [дубликаты]
На этот вопрос уже есть ответ здесь:
Как динамически создавать загрузочные модалы как компоненты Angular2? 1 ответЯ ищу способ, позволяющий двум угловым 2 приложениям общаться друг с другом. Я обнаружил, что я, вероятно, должен сделать общий сервис.
мойmain.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';
bootstrap(LoginComponent);
bootstrap(ShoppingListComponent);
Я сделал услугуuser.service.ts
export class UserService {
authenticated: boolean;
constructor() { }
setAuthenticated(authenticated) {
this.authenticated = authenticated
}
isAutheticated() {
return this.authenticated;
}
}
Есть ли способ поделиться этим сервисом между обоими компонентами?
РЕШЕНИЕ
Я нашел другой способ сделать это с фабрикой:
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { bind } from '@angular/core';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';
import { UserService } from './services/user.service';
import { UserServiceFactory } from './factories/UserServiceFactory';
bootstrap(LoginComponent,[bind(UserService).toFactory(UserServiceFactory)]);
bootstrap(ShoppingListComponent,[bind(UserService).toFactory(UserServiceFactory)]);
UserServiceFactory.ts
import { UserService } from '../services/user.service';
var sdInstance = null;
export function UserServiceFactory() {
if(sdInstance == null) {
sdInstance = new UserService();
}
return sdInstance;
}
ОБНОВИТЬ
Как сказано в комментарияхbind()
устарела.
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';
import { UserService } from './services/user.service';
import { UserServiceFactory } from './factories/UserServiceFactory';
bootstrap(LoginComponent, [provide(UserService, {useFactory:UserServiceFactory})]);
bootstrap(ShoppingListComponent, [provide(UserService, {useFactory:UserServiceFactory})]);