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

Posted

技术标签:

【中文标题】Angular 2 中兄弟组件之间的数据共享【英文标题】:Data sharing between sibling components in Angular 2 【发布时间】:2017-10-01 17:15:22 【问题描述】:

我正在开发 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  )
    

由于两个组件都处于同级级别,我认为使用数据共享服务是一个好方法。所以,我创建了数据服务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();
    

没有父组件。这些组件位于用户模块中,其路由如下:

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

我在服务级别添加了 user 属性。在组件 I 中,我创建了一个 user 属性,其值最终用于修改服务 user 属性,以便在组件 II 中可以访问它。在组件 II 实例化期间,我使用服务用户属性初始化其用户属性。但是,这次我作为用户得到了空对象。 我已在 user.module 的 NgModule 中将服务注册为providers: [UserService]。如果我在两个组件级别注册它,也会出现同样的问题。有什么问题?

【问题讨论】:

似乎 UserService 被实例化了两次;每个组件一次。我需要它只实例化一次,以便可以在组件之间共享数据。 请发布user.module 和您的app.module。此外,向服务添加一个构造函数,并在其中添加一个日志语句以确保它被实例化了多次。 我在 embed.plnkr.co/FQGDe1gbSI5speWFLDLl 创建了一个 plnkr。这是有效的,但相同的代码在我的本地机器上不起作用。我使用了 Angular 快速入门种子 (github.com/angular/quickstart) 并添加了我的代码。它不工作。然而,有趣的是,如果我使用 Angular CLI 并添加我的代码,它会再次起作用。有什么原因吗? 看起来您的代码很好,并且在新的 angular-cli 项目和新的 angular 快速入门中按预期工作。您的旧源代码中可能有一些不同的东西导致它。但至少你知道如何解决它。 这看起来很有趣。无论如何,谢谢。 【参考方案1】:

我找不到这个问题的正确答案。但是,从上面的 cmets 可以明显看出,当我在 plunker 中尝试或使用 Angular CLI 1.0.2 时,代码运行良好。早些时候,我使用的是快速启动种子。 正如@Ahmed Musallam 所建议的,我在服务中使用了console.log 语句,当然,服务被实例化了两次。 我现在使用angular-cli。这是我能想到的唯一解决方案。

【讨论】:

以上是关于Angular 2 中兄弟组件之间的数据共享的主要内容,如果未能解决你的问题,请参考以下文章

如何以角度在兄弟组件之间共享数据?

Angular4中两个兄弟组件之间的共享服务

Angular2:通过路由器在兄弟组件之间传递数据?

angular 使用rxjs 监听同级兄弟组件数据变化

如何在Angular2中的组件之间共享数据[重复]

在兄弟组件之间共享数据(未按预期工作)