如何通过 Angular 6 中的服务将对象发送到不相关的组件？

Posted 2023-02-23

【中文标题】如何通过 Angular 6 中的服务将对象发送到不相关的组件？

【英文标题】：How can I send object to unrelated component through a service in Angular 6?

【发布时间】：2019-08-04 22:13:56

【问题描述】：

所以我是 Angular 的新手，我正在尝试使用服务将一个对象从组件 1 发送到组件 2。当我将结果记录到组件 2 中的控制台时，它没有给我对象的更新值，这可能是因为服务在第二个组件中重新初始化。你能帮忙解决这个问题吗？

这是我的代码

 @Injectable(
  providedIn: 'root'
)
export class CodeServiceService 
  codeInfo:Code=
    name:"",
    text:"",
    type:0
  ;
  getCode()
    console.log(this.codeInfo);
    return this.codeInfo;
  
  setCode(result:Code)
    this.codeInfo=result;
  

组件1

@Component(
  selector: 'app-newscan',
  templateUrl: './newscan.component.html',
  styleUrls: ['./newscan.component.css'],
  providers:[CodeServiceService]
)
export class NewscanComponent implements OnInit 
scannedCode:Code=
    name:"name",
    text:"text",
    type:1
  ;

  constructor(private service:CodeServiceService)
saveInfo()
    this.service.setCode(this.scannedCode);
  

组件2

@Component(
  selector: 'app-scan-list',
  templateUrl: './scan-list.component.html',
  styleUrls: ['./scan-list.component.css'],
  providers:[CodeServiceService]
)

export class ScanListComponent implements OnInit 

  newcode:Code=
    name:"",
    text:"",
    type:0
  ;
constructor(private service:CodeServiceService)
  
  ngOnInit()

    this.newcode=this.service.getCode();
console.log(this.newcode);
  

【问题讨论】：

您可以从providers 数组中删除该服务。您已经在root

中提供了这个

检查我的答案并随时投票

【参考方案1】：

那是因为你在使用

 providers:[CodeServiceService]

在两个组件中，因此它为两个组件创建新的服务实例。

在app.module.ts中使用providers:[CodeServiceService]

@NgModule(
   // ..... imports
    providers:[CodeServiceService]
   //..
)

在 Angular 6 中：

您可以在service.ts 中使用以下代码，而不是在app.module.ts 中添加

@Injectable(
  providedIn: 'root',
)

【讨论】：

如果定义了providedIn: 'root'，则不需要放入模块的providers数组中。

从 Angular 6 开始 providedIn: 'root' 使其可用于整个应用程序。 app.module 中不需要providers

【参考方案2】：

您可以使用 rxjs 主题，这里是示例。

1./服务

 import  Observable, Subject  from 'rxjs';
 @Injectable(
    providedIn: 'root'
 )
 export class CodeServiceService 
 codeInfo:Code=
    name:"",
    text:"",
    type:0
 ;
 getCode() : Observable<any> 
    return this.subject.asObservable();

setCode(result:Code)
   this.subject.next( text: code );

2./组件1

 export class NewscanComponent implements OnInit 
 scannedCode:Code=
   name:"name",
   text:"text",
 type:1
 ;

 constructor(private service:CodeServiceService)
 saveInfo()
   this.service.setCode(this.scannedCode);
 

3./组件2

export class ScanListComponent implements OnInit 
 newcode:Code=
   name:"",
   text:"",
   type:0
;
constructor(private service:CodeServiceService)

ngOnInit()
 this.newcode=this.service.getCode().subscribe(response => 
        console.log(response); // here you can get updated data from another component  
 );
 

你可以实现这个方法来向没有父子关系的组件发送数据。