时间戳

首页 > 解决方案 > 如何通过 Angular 6 中的服务将对象发送到不相关的组件？

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

问题描述

所以我是 Angular 的新手，我正在尝试使用服务将一个对象从 component1 发送到 component2。当我在组件 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);
  }
}

标签： angularservicecomponents

解决方案

这是因为你在使用

 providers:[CodeServiceService]

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

用于providers:[CodeServiceService]_app.module.ts

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

在 Angular 6 中：

您可以使用下面的代码 in service.ts，而不是添加 inapp.module.ts

@Injectable({
  providedIn: 'root',
})

推荐阅读