如何在angular的同级组件之间共享数据? [英] How do I share data between sibling components in angular?

问题描述

我有一个带有3个同级组件的Angular应用程序，它们能够访问和更新变量数据".它们已连接到路由器，但是我要传递的数据是敏感的(api端点确定折扣)，所以我不能使用cmp2/:data

I have an Angular application with 3 sibling components, they are able to access and update the variable "data". They are connected to the router, but the data I want to pass is sensitive (api endpoints to determine discounts) so I cannot use cmp2/:data

组件1有一个称为数据的对象，组件2和3需要接收此数据对象.我认为这可以通过共享服务来完成，但是我不太确定如何使此事件发射器正常工作.

Component 1 has an object called data and Components 2 and 3 need to receive this data object. I think this can be done with a shared service, but I'm not quite sure how to get this event emitter to work..

我的index.html:

My index.html:

<router-outlet></router-outlet>

组件1:

<button [routerLink]=['cmp2/']>Go to Comp 2 </button>
<button [routerLink]=['cmp3/']>Go to Comp 3 </button>

组件2和3:

{{ data }}

推荐答案

就像您要重定向到那些组件一样，您可以做的是在第一个组件上创建一个事件发射器，单击该事件将发射数据.送给父母(共3个).然后在父级中，您将捕获到发射，并将其分配给传递给其他组件的数据.

As it looks like you are looking to redirect to those components, what you can do is have an event emitter on component one, that on click will emit the data to the parent(of all 3). Then in the parent you would catch the emit, and assign that to data that you pass into the other components.

Component1

Component1

import { Component, EventEmitter, Output } from '@angular/core';
import { Router }                          from '@angular/router';

@Component(...)
export class Component1 {
    @Output() redirect:EventEmitter<any> = new EventEmitter();

    data:any = {text: "example"};

    constructor(private router:Router){}

    changeComponent(url:string){
        this.redirect.emit(data);//emits the data to the parent
        this.router.navigate([url]);//redirects url to new component
    }
}

Component2&组件3

Component2 & Component3

import { Component, Input } from '@angular/core';

@Component(...)
export class Component2 {
    @Input() data:any;
}

父母

import { Component } from '@angular/core';

@Component(...)
export class Parent {
    parentData:any;
}

Parent.html

Parent.html

<component1 (redirect)="parentData=$event"></component1>
<component2 [data]="parentData"></component2>
<component3 [data]="parentData"></component3>

---

如果没有父母，另一个选择是拥有一个服务，将其注入每个父母，然后将接收者的服务钩到OnInit生命周期钩子上.之所以可行，是因为如果在共享模块的提供程序中，服务是单例的.

---

Another option, if you don't have a parent, is to have a service, that you inject into each parent, and then for the receivers hook into the OnInit lifecycle hook. This works because services are a singleton if in a provider of a shared module.

服务

import { Injectable } from '@angular/core';

@Injectable()
export class SharingService{
    private data:any = undefined;

    setData(data:any){
        this.data = data;
    }

    getData():any{
        return this.data;
    }
}

Component1

Component1

import { Component }      from '@angular/core';
import { Router }         from '@angular/router';
import { SharingService } form './sharing.service';

@Component(...)
export class Component1 {

    data:any = {text: "example"};

    constructor(private router:Router,
        private sharingService:SharingService){}

    changeComponent(url:string){
        this.sharingService.setData(this.data);
        this.router.navigate([url]);//redirects url to new component
    }
}

Component2&组件3

Component2 & Component3

import { Component, OnInit } from '@angular/core';
import { SharingService }    form './sharing.service';

@Component(...)
export class Component2 implements OnInit{
    data:any;

    constructor(private router:Router,
        private sharingService:SharingService){}

    ngOnInit(){
        this.data = this.sharingService.getData();
    }
}

确保将其添加到模块的providers数组中.

Make sure you add it to providers array of the module.

模块

import { SharingService } from './sharing.service';
...

@NgModule({
    ...
    providers: [ SharingService ]
})

这篇关于如何在angular的同级组件之间共享数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！