Angular 2中兄弟组件之间的数据共享

Question

我正在Angular 2应用程序中，其中模块中有两个组件。 这两个模块都是独立的，没有父子关系。 第一个组件从用户收集一些需要传递给第二个组件的数据。

组件I：

@Component({
    selector: 'user-otp-generation',
    templateUrl: `../partials/user-management/user-generate-otp.html`,
    moduleId: module.id,
    // providers: [UserService]
})

export class UserOtpGenerationComponent{
constructor(private UserService: UserService) { }

user: User = new User();

onSubmit(){
    this.UserService.generateOTP(this.user.phone)
        .then(response => {
                this.UserService.setUserProperty('phone', this.user.phone); //From user input
                this.UserService.setUserProperty('otp', response.otp);  //From API response
            })
    }
}

第二部分：

@Component({
    selector: 'user-authentication',
    templateUrl: `../partials/user-management/user-authentication.html`,
    moduleId: module.id,
    // providers: [UserService]
})

export class UserAuthenticationComponent {
    constructor(private UserService: UserService) {
        this.user = UserService.getUser();
    }

    user:User;

    onSubmit(){
        this.UserService.verifyOTP(this.user.otp)
            .then(response => { //Do something  })
    }
}

由于两个组件都处于同级级别，因此我认为使用数据共享服务是一种不错的方法。 因此，我创建了数据服务UserService 。 同样， User只是一个模型类，它具有许多与用户实例相对应的字段。

用户类别

export class User {
    phone: string;
    otp: string;
    reference_id: string;
    // Many other similar fields
}

UserService

@Injectable()
export class UserService {
    private user: User = new User();

    getUser(){
        return this.user;
    }

    setUserProperty(key, value){
        this.user[key] = value;
    }

    generateOTP(phone: string): Promise<any>{
        return this.http.get('some-url').toPromise();
    }
}

没有父组件。 这些组件位于用户模块内部，该用户模块的路由如下：

const userRoutes: Routes = [
    {path: '', redirectTo: 'generate-otp', pathMatch: 'full'},
    {path: 'generate-otp', component: UserOtpGenerationComponent},
    {path: 'authenticate', component: UserAuthenticationComponent}
]

我在服务级别添加了一个user属性。 在组件I内部，我创建了一个user属性，该属性的值最终用于修改服务user属性，以便可以在组件II中对其进行访问。 在组件II实例化期间，我使用服务用户属性初始化其用户属性。 但是，这次我以用户身份得到空对象。 我已经将服务注册为providers: [UserService] user.module的NgModule中的providers: [UserService] 。 如果我在两个组件级别都注册它，则会发生相同的问题。 有什么问题

Answer 1

我找不到这个问题的正确答案。 但是，从上面的注释中可以明显看出，当我在插件中尝试或使用Angular CLI 1.0.2时，代码可以正常工作。 之前，我使用的是quickstart种子。 正如@Ahmed Musallam所建议的那样，我在服务内部使用了console.log语句，当然，服务被实例化了两次。 我现在正在使用angular-cli 。 这是我能找出的唯一解决方案。