Javascript 如何使用angular 1.x服务从一个组件更新另一个组件？

所以我有一个父组件，里面有很多更小的组件。一般的想法是，我需要一个组件来接收输入中的数据并将其显示在另一个组件上。这是我的问题，但不太有效，请稍后详细说明问题：

const app = angular.module('app', []);

app.service('dataService', function() {
  let data = {
    key1: "",
    key2: "",
    key3: {
      key4: 0,
      key5: 0
    }
  }

  this.getKey1 = function() {
    return data.key1;
  }

  this.updateKey1 = function(str) {
     data.key1 = str;
  }
}

app.component('display', {
  controller: displayController,
  template: '<p>{{ keyOne }}</p>'
});

app.component('input', {
  controller: inputController,
  template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">'
}

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    self.keyOne = dataService.getKey1();
  }
}

function inputController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    self.sendKey1 = function() {
      dataService.updateKey1(vm.key1)
  }
}

const-app=angular.module（'app'，[]）；
app.service（'dataService'，function（））{
让数据={
键1:“，
键2:“，
关键3：{
键4:0，
键5:0
}
}
this.getKey1=函数（）{
返回数据.key1；
}
this.updateKey1=函数（str）{
data.key1=str；
}
}
应用程序组件（'显示'{
控制器：显示控制器，
模板：'{{keyOne}}
'
});
应用程序组件（'输入'{
控制器：输入控制器，
模板：“”
}
函数displayController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.keyOne=dataService.getKey1（）；
}
}
函数inputController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.sendKey1=函数（）{
dataService.updateKey1（vm.key1）
}
}

---

因此，更新工作正常，但不会将其传递给显示组件。如果在更新后记录数据对象，则数据对象是正确的，但不会显示在视图上。

查看本文：

以良好的方式解释您的问题

---

希望能有所帮助！

看看这篇文章：

以良好的方式解释您的问题

希望有帮助！

您正在更新字符串

data.key1=str；

在

let数据={
键1:“，
键2:“，
关键3：{
键4:0，
键5:0
}
}

Angular不绑定组件之间的字符串，只绑定对象

看这里

var-app=angular.module（'plunker'，['ngRoute'，'ngAnimate'，'ngSanitize']）；
app.service（'dataService'，function（））{
让数据={
键1:“，
键2:“，
关键3：{
键4:0，
键5:0
}
}
this.getData=函数（）{
返回数据；
}
this.updateKey1=函数（str）{
data.key1=str；
}
});
应用程序组件（“inputc”{
控制器：输入控制器，
模板：“”
});
应用程序组件（'显示'{
控制器：显示控制器，
模板：'{{data.key1}}
'
});
函数displayController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.data=dataService.getData（）；
}
}
函数inputController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.sendKey1=函数（）{
dataService.updateKey1（vm.key1）
}
}
}

安古拉斯普朗克
文件。写（“”）；

您正在更新字符串

data.key1=str；

在

let数据={
键1:“，
键2:“，
关键3：{
键4:0，
键5:0
}
}

Angular不绑定组件之间的字符串，只绑定对象

看这里

var-app=angular.module（'plunker'，['ngRoute'，'ngAnimate'，'ngSanitize']）；
app.service（'dataService'，function（））{
让数据={
键1:“，
键2:“，
关键3：{
键4:0，
键5:0
}
}
this.getData=函数（）{
返回数据；
}
this.updateKey1=函数（str）{
data.key1=str；
}
});
应用程序组件（“inputc”{
控制器：输入控制器，
模板：“”
});
应用程序组件（'显示'{
控制器：显示控制器，
模板：'{{data.key1}}
'
});
函数displayController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.data=dataService.getData（）；
}
}
函数inputController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
self.sendKey1=函数（）{
dataService.updateKey1（vm.key1）
}
}
}

安古拉斯普朗克
文件。写（“”）；

看一看

下面是正在发生的事情的简要总结：

displayController

执行

self.keyOne=dataService.getKey1（）

。这将为

$scope.keyOne

分配一个空字符串

在视图中，表达式

{{keyOne}

监视

$scope.keyOne

的更改。它最初的计算结果为

”

，因此视图中存在一个空字符串

inputController

将

dataService.data.keyOne

更改为某些值，例如

hello world

在视图中，表达式

{{keyOne}

再次计算

$scope.keyOne

作为摘要周期的一部分所做的更改。问题：

$scope.keyOne

仍然是一个空字符串！

displayController

不知道如何从

dataService.data.keyOne

获取最新值

幸运的是，修复很简单。您只需要获取对

数据

对象的引用，以便在查看更改时正确计算

数据。keyOne

：

app.service('dataService', function() {
  let data = {
    key1: ""
  }

  //Expose the data object
  this.getData = function() {
    return data;
  }
}

app.component('display', {
  controller: displayController,
  //Evaluate the current value of keyOne in the data object
  template: '<p>{{ data.keyOne }}</p>'
});

function displayController($scope, dataService) {
  const vm = this;
  const self = $scope;
  vm.$onInit = onInit;
  function onInit() {
    //Get a static reference to the data object.
    //The data object itself shouldn't change, but its properties will.
    self.data = dataService.getData();
  }
}

app.service（'dataService'，function（））{
让数据={
键1:“”
}
//公开数据对象
this.getData=函数（）{
返回数据；
}
}
应用程序组件（'显示'{
控制器：显示控制器，
//计算数据对象中keyOne的当前值
模板：'{{data.keyOne}}
'
});
函数displayController（$scope，dataService）{
const vm=这个；
const self=$scope；
vm.$onInit=onInit；
函数onInit（）{
//获取对数据对象的静态引用。
//数据对象本身不应更改，但其属性将更改。
self.data=dataservice