Javascript Angular 2中同级组件之间的数据共享

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

成分一：

@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  })
    }
}

第二部分：

@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
}

用户服务

@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();
    }
}

我在服务级别添加了一个

user

属性。在组件I中，我创建了一个

user

属性，其值最终用于修改服务

user

属性，以便在组件II中可以访问该属性。在组件II实例化期间，我使用服务用户属性初始化其用户属性。但是，这次我作为用户得到了空对象。

---

我已在user.module的NgModule中将服务注册为

提供者：[UserService]

。如果在两个组件级别注册它，则会出现相同的问题。问题是什么？

我找不到这个问题的正确答案。但是，从上面的注释中可以明显看出，当我在plunker中尝试或使用Angular CLI 1.0.2时，代码运行良好。早些时候，我在使用quickstart种子。 正如@Ahmed Musallam所建议的，我在服务中使用了console.log语句，当然，服务被实例化了两次。

---

我现在使用的是

angular cli

。这是我能找到的唯一解决方案。

似乎UserService被实例化了两次；每个组件一次。我只需要实例化一次，以便在组件之间共享数据。请发布

user.module

和您的

app.module

。另外，向服务添加一个构造函数，并在其中添加一个log语句，以确保它被多次实例化。这是工作，但相同的代码在我的本地机器上不工作。我使用了Angular quickstart seed（）并添加了代码。它不起作用。然而，有趣的是，如果我使用Angular CLI并添加代码，它仍然可以工作。有什么原因吗？看起来您的代码很好，在新的angular cli项目和新的angular quickstart中工作正常。在旧的源代码中可能有一些不同的东西导致了它。但至少你知道如何修复它。这看起来很有趣。无论如何，谢谢。