Angular 2, Kommunikation zwischen 2 Apps auf derselben Seite

Question

Ich bin auf der Suche nach einer Möglichkeit, zwei Angular 2 Apps miteinander kommunizieren zu lassen. Ich fand, dass ich wahrscheinlich einen geteilten Dienst machen sollte.

Mein main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { LoginComponent } from './login.component'; 
import { ShoppingListComponent } from './shopping-list.component'; 

bootstrap(LoginComponent); 
bootstrap(ShoppingListComponent); 

Ich habe einen Dienst gemacht user.service.ts

export class UserService { 
    authenticated: boolean; 
    constructor() { } 

    setAuthenticated(authenticated) { 
    this.authenticated = authenticated 
    } 

    isAutheticated() { 
    return this.authenticated; 
    } 
} 

Gibt es eine Möglichkeit, diesen Service zwischen den beiden Komponenten zu teilen?

SOLUTION

fand ich eine andere Art und Weise mit einem Werk zu tun:

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

Wie in den Kommentaren bind() veraltet ist.

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

Die kurze Antwort ist, dass Sie nicht können.

Davon abgesehen können Sie eine Instanz freigeben und beim Booten beider Komponenten verwenden.

Hier ist ein Beispiel ist:

var service = new SharedService(); 

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