使用 Angular 中的服务在组件之间共享类

大佬教程收集整理的这篇文章主要介绍了使用 Angular 中的服务在组件之间共享类，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 Angular 中的服务在组件之间共享类？

我想在两个子组件之间共享 Angular 中的以下类：

export class DatasetsMetadata {
    name!: String;
    Code!: String;
    F@R_673_10613@ency!: String;
}

我想使用 Angular 中的服务共享数据，使用如下方式：

import { DatasetsMetadata } from './datasets-Metadata'; 
import { Injectable } from '@angular/core';

@Injectable({
  provIDedIn: 'root'
})
export class Oodlerservice {
  
  private SELEctedDataset = new DatasetsMetadata();
  
  constructor() { }
  
  setSELEctedDataset(SELEction: DatasetsMetadata) {
    this.SELEctedDataset.Code = SELEction.Code;
    this.SELEctedDataset.name = SELEction.name;
    this.SELEctedDataset.F@R_673_10613@ency = SELEction.F@R_673_10613@ency;
  };

  getSELEctedDataset(): DatasetsMetadata {
    return this.SELEctedDataset;
  }
}

然后我想在一个组件中发生变化时将数据写入服务，如下例所示：

  onSELEction(event: any){
    this.CurrentDataset.Code = event.option.value;
    this.CurrentDataset.name = event.option.name;
    this.CurrentDataset.F@R_673_10613@ency = "Default";
    this.Model.setSELEctedDataset(this.CurrentDataset); 
  };

如果我通过将数据记录到控制台来检查它，上面的代码似乎正确地将数据写入服务。但是，当我尝试使用以下内容读取另一个组件中的数据时失败：

import { Component,OnInit,Injectable } from '@angular/core';
import { Oodlerservice } from '../oodler.service';
import { DatasetsMetadata } from '../datasets-Metadata';

@Component({
  SELEctor: 'app-oodler-chart',templateUrl: './oodler-chart.component.HTML',styleUrls: ['./oodler-chart.component.CSS'],provIDers: [Oodlerservice]
})

export class OodlerChartComponent {

  constructor (private http: httpClIEnt,private Model: OodlerservicE){}

  getMetadata(): voID {
    var Metadata = this.Model.getSELEctedDataset();
    console.log(Metadata.CodE);
  }

失败的是我在 getMetadata() 方法中返回未定义的元数据变量。问题似乎是我正在 OodlerChartComponent 中创建服务的新实例。例如，如果我像下面的 getText() 方法那样向服务添加返回静态数据的方法，它会成功返回字符串“测试字符串”。

  getText(): String {
    return "test String";
  }

我已经尝试了多种方法，包括在 DatasetsMetadata 类型的 OodlerChartComponent 类中创建一个成员，而不是使用局部变量，但到目前为止没有任何效果。谁能解释一下如何正确地做到这一点？

解决方法

providers: [Oodlerservice]

大佬总结

以上是大佬教程为你收集整理的使用 Angular 中的服务在组件之间共享类全部内容，希望文章能够帮你解决使用 Angular 中的服务在组件之间共享类所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。