我有一个包含 3 个同级组件的 Angular 应用程序,它们能够访问和更新变量“数据”。它们连接到路由器,但我要传递的数据是敏感的(api 端点以确定折扣)所以我不能使用 cmp2/:data
组件 1 有一个名为数据的对象,组件 2 和组件 3 需要接收此数据对象。我认为这可以通过共享服务来完成,但我不太确定如何让这个事件发射器工作..
我的 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 个)。然后在父级中您将捕获发射,并将其分配给您传递给其他组件的数据。
组件 1
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
}
}
组件 2 和组件 3
import { Component, Input } from '@angular/core';
@Component(...)
export class Component2 {
@Input() data:any;
}
parent
import { Component } from '@angular/core';
@Component(...)
export class Parent {
parentData:any;
}
Parent.html
<component1 (redirect)="parentData=$event"></component1>
<component2 [data]="parentData"></component2>
<component3 [data]="parentData"></component3>
如果您没有父对象,另一种选择是拥有一个服务,您将其注入(inject)到每个父对象中,然后让接收者挂接到 OnInit 生命周期 Hook 中。这是有效的,因为如果在共享模块的提供者中,服务是单例的。
服务
import { Injectable } from '@angular/core';
@Injectable()
export class SharingService{
private data:any = undefined;
setData(data:any){
this.data = data;
}
getData():any{
return this.data;
}
}
组件 1
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
}
}
组件 2 和组件 3
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();
}
}
确保将它添加到模块的提供程序数组中。
模块
import { SharingService } from './sharing.service';
...
@NgModule({
...
providers: [ SharingService ]
})
关于angular - 如何在 Angular 兄弟组件之间共享数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43940351/