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

【问题标题】：How can I send object to unrelated component through a service in Angular 6?如何通过 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 中提供了这个
检查我的答案并随时投票

标签： angular service components

【解决方案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  
 });
 }
}

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

【讨论】：