Angular 2，在同一页面上运行的两个应用程序之间的通信[重复]

Question

我正在寻找一种让两个 Angular 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;
}

更新

正如 cmets 中所说，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 })
]);