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})]);

Ответы на вопрос(1)

Ваш ответ на вопрос