如何访问另一个 angular 组件的对象值

Question

很遗憾，我无法在组件之间传递数据。我参加了 bcqr-reader 演示 https://embed.plnkr.co/m9dtF9llcAw7eYE94b5k/preview 并将扫描的信息传递给我的第二个组件。首先你可以看到我的扫描组件。 “$scope.url”是我感兴趣的对象。

angular.module('foo').component('scan', {
  bindings:{url:"="},
  templateUrl:  'templates/scan.html',
  controller:function($scope){

      $scope.start = function() {
      $scope.cameraRequested = true;
  }

  $scope.processURLfromQR = function (url) {
    $scope.url = url;
    $scope.cameraRequested = false;
  }

  }

});

我的第二个组件 "show" 是“$scope.url”的目的地。稍后我将需要 $scope.url 将其用作 couchdb 查询的 id。我阅读了很多关于组件之间数据交换的内容，但我没有理解运行。我还尝试将对象存储为 $rootScope。我更喜欢基于事件的解决方案，如 $onChanges，但现在欢迎大家提供帮助。

angular.module('foo').component('show', {
template:  '<p> Transfered value: {{$ctrl.url}}</p>',
bindings:{url:"="},
require: { url:'^scan'
},
controller: function () {
this.$onInit = function () {
console.log(this.foo.url); // 
  }; }

});

我的 app.js 文件如下所示：

myApp.config(function($stateProvider,$urlRouterProvider) {
var scanState = {
name: 'scan',
url: '/scan',
component:'scan'
}

var showState = {
name:'show',
url: '/show',
component:'show'
}

$stateProvider.state(scanState);
$stateProvider.state(showState);

$urlRouterProvider.otherwise("scan");
});

Answer 1

要在组件之间共享内容，您可以使用服务解决。服务是单例的类，您存储在其中的内容在整个应用程序中都可用。单例类要记住的一点是存储的数据不是持久的，一旦应用程序终止就会被清除。

app.service('service-name', function(){

   var myVar = undefined;

   var service-name = {
       setVar: function(_value){
            myVar = _value;
       },
       getVar: function(){
            return myVar;
       }
   };       

   return service-name;
});

要使用来自控制器的服务，只需在控制器的依赖项中声明它并像这样使用：

表单控制器 A :

var myValue = something;

service-name.setVar(myValue);

来自控制器 B：

var myVar = service-name.getVar();

如何访问另一个 angular 组件的对象值

How to access a object value of another angular component

angularjs

angular-ui-router

angular-components