javascript - Angular2 服务的现场问题

标签 javascript angular typescript angularjs-scope

我有一个服务:

@Injectable()
export class MyService implements IMyService {
   myServiceArray: Array<string> = ["hi", "hello", "yoyo"];
}

此服务被注入(inject)到组件中,该组件使用 ngModel 更新字符串数组。当我尝试从组件或服务打印数组时,一切正常(也就是使用 ngModel 更新数组)。

我也在另外1个@Inject这样的Service。

@Injectable()
export class AnotherService implements IAnotherService {

  constructor(public myService: MyService) {
  }

  printValues() {
     console.log(this.myService.myServiceArray);
  }
}

当我调用 printValues() 时,即使我用模型更新了数组的值,也会打印 ["hi", "hello", "yoyo"]!

我做错了什么?

编辑:

该组件的代码如下。

@Component({
  selector: 'app-root',
  providers: [MyService],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppCustomerData implements IAppCustomerData {

  constructor(public myService: MyService) {
  }
}

最佳答案

如果您有多个服务实例,您必须确保注入(inject)了相同的服务实例,每个实例中都有自己的数组。

我会尝试使用本地存储来存储服务中的数据,而不是你可以有多个实例并且每个实例都可以编辑或返回相同的值: How to store token in Local or Session Storage in Angular 2?

也许这可以解决您的问题: How do I create a singleton service in Angular 2?

关于javascript - Angular2 服务的现场问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42271982/

相关文章:

angular - 类型错误 : You provided 'undefined' where a stream was expected

单击任何 [routerLink] 时的 Angular 2 事件

angular - 从 Angular 8 升级到 9 后出现构建错误

javascript - react-apollo 向组件提供数据和突变

javascript - Webpack 根据入口名动态导入

javascript - 是否可以检查 Angular 应用程序是否已经有正在运行的应用程序模块?

angular - NG2 Cli 模块发现和加载

javascript - Eslint 不检查 .ts 或 .tsx 文件

angular - 比较 Observable 的前一个值和 Angular 中的下一个值

javascript - 将 aws-sdk 与 amplify 和 React 结合使用