如何使用angular 1.x服务从一个组件更新另一个组件？
[英]How to use angular 1.x services to update one component from another?
问题描述
So I have a parent component that has a ton of smaller components inside of it. 
所以我有一个父组件，其中有很多较小的组件。 The general idea is that I need one component to take in the data in an input and display it on another component. 总体思路是，我需要一个组件来接受输入中的数据并将其显示在另一组件上。 This is what I have which doesn't quite work, more details on the problem afterwards: 这是我所不能解决的问题，之后将详细介绍该问题：
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)
}
}
So the update works, but then it doesn't pass it to the display component. 因此，更新有效，但是没有将其传递给显示组件。 If I log the data object after updating it it's correct but it doesn't show up on the view. 如果我在更新后记录数据对象，它是正确的，但它不会显示在视图上。
3 个解决方案
解决方案1
2 已采纳 2017-10-11 14:40:45
You are updating a string data.key1 = str; 您正在更新字符串data.key1 = str; in the 在里面
let data = { key1: "", key2: "", key3: { key4: 0, key5: 0 } }
Angular doesn't bind strings between components, only binds objects. Angular不会在组件之间绑定字符串，而只会绑定对象。
see here https://plnkr.co/edit/wfwyyGpcMKOSHGFdg2DS?p=preview 看到这里https://plnkr.co/edit/wfwyyGpcMKOSHGFdg2DS?p=preview
var app = angular.module('plunker', ['ngRoute', 'ngAnimate', 'ngSanitize']); app.service('dataService', function() { let data = { key1: "", key2: "", key3: { key4: 0, key5: 0 } } this.getData = function() { return data; } this.updateKey1 = function(str) { data.key1 = str; } }); app.component('inputc', { controller: inputController, template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">' }); app.component('display', { controller: displayController, template: '<p>{{ data.key1 }}</p>' }); function displayController($scope, dataService) { const vm = this; const self = $scope; vm.$onInit = onInit; function onInit() { self.data = dataService.getData(); } } function inputController($scope, dataService) { const vm = this; const self = $scope; vm.$onInit = onInit; function onInit() { self.sendKey1 = function() { dataService.updateKey1(vm.key1) } } }
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script src="https://code.angularjs.org/1.6.2/angular.js"></script> <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version --> <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>--> <script src="https://code.angularjs.org/1.6.2/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.2/angular-animate.js"></script> <script src="https://code.angularjs.org/1.6.2/angular-sanitize.js"></script> <script src="app.js"></script> </head> <body> <inputc></inputc> <display></display> </body> </html>
解决方案2
1 2017-10-11 14:07:32
Take a look at this article: https://www.aurorasolutions.io/blog/angularjs-cross-component-communication/ 看看这篇文章： https : //www.aurorasolutions.io/blog/angularjs-cross-component-communication/
Explains your question passing in a good way. 很好地说明您通过的问题。
Hope it helps! 希望能帮助到你！
解决方案3
1 2017-10-11 14:50:03
Take a look at A Tale of Frankenstein and Binding to Service Values in Angular.js . 看一下《科学怪人故事》和Angular.js中的绑定到服务值 。
Here's the quick summary of what is happening: 这是正在发生的事情的快速摘要：
-
displayControllerexecutesself.keyOne = dataService.getKey1().displayController执行self.keyOne = dataService.getKey1()。 This assigns an empty string to$scope.keyOne.这将为$scope.keyOne分配一个空字符串。 - In the view, the expression
{{ keyOne }}watches$scope.keyOnefor changes.在视图中，表达式{{ keyOne }}$scope.keyOne进行更改。 It initially evaluates to"", so an empty string is present in the view.最初的计算结果为""，因此视图中存在一个空字符串。 -
inputControllerchangesdataService.data.keyOneto some value, such ashello world.inputController将dataService.data.keyOne更改为某个值，例如hello world。 - In the view, the expression
{{ keyOne }}once again evaluates$scope.keyOnefor changes as part of the digest cycle.在视图中，表达式{{ keyOne }}再次求值$scope.keyOne作为摘要循环的一部分进行更改。 Problem:$scope.keyOneis still an empty string!问题： $scope.keyOne仍然是一个空字符串！displayControllerdoesn't know to fetch the latest value fromdataService.data.keyOne.displayController不知道要从dataService.data.keyOne获取最新值。
Luckily, the fix is simple. 幸运的是，修复很简单。 You just need to get a reference to the data object so that you can correctly evaluate data.keyOne when watching for changes: 您只需要获取对data对象的引用，以便在观察更改时可以正确评估data.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();
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.