Угловая 2, связь между двумя приложениями, запущенными на одной странице

Question

Я ищу способ, позволяющий двум приложениям с угловым 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; 
} 

UPDA TE

Как указано в комментариях 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})]); 

Answer 1

Короткий ответ вы не можете.

Сообщалось, что вы можете совместно использовать экземпляр и использовать его при загрузке обоих компонентов.

Вот пример:

var service = new SharedService(); 

bootstrap(LoginComponent, [ 
    provide(SharedService, { useValue: service }) 
]); 
bootstrap(ShoppingListComponent, [ 
    provide(SharedService, { useValue: service }) 
]);