Angular.js，如何将值从一个组件传递到任何其他组件

Question

我是 Angular.js 的初学者，所以如果我没有解释足够的东西，我会把它添加到问题中，告诉我。

我有：A component.js A template.html B component.js B template.html.

A component.js 有 $scope.isActive = true，代码根据需要更改值。此属性适用于模板 A template.html.

问题是，我想为 B template.html 使用相同的值。我不知道如何通过它，我还 B component.js 与 B template.html 合作，如果这在某种程度上很重要的话。

现在我正在尝试在 B template.html 中使用 A component.js 中的 $scope.isActive，但它什么也没做，我想它是 undefined.

这就是我在 B template.html

中尝试使用它的方式

<img src="res/large-loading.gif" ng-if="!isActive">

Answer 1

最佳解决方案是将 $scope.isActive 移动到包含 'component A' 和 'component B' 的新 'root' 组件。然后您可以使用 'component A' 和 'component B' 定义中的 input/output 绑定来传递/修改其值，例如：

组件A定义：

angular.module('app').component('componentA', {    
    templateUrl: 'component-A.html',                 
    bindings: {
       isActive: "<", // use to bind property as component input
       isActiveChanged: "&" // use to bind a METHOD that changes the property in the root component controller
    }
});

组件A模板(component-A.html):

<img 
   src="res/large-loading.gif" 
   ng-if="!$ctrl.isActive" 
   ng-click="$ctrl.isActiveChanged({isActive: !$ctrl.isActive})"/>

组件 B 定义：

angular.module('app').component('componentB', {    
    template: 'component-B.html',                 
    bindings: {
       isActive: "<", // use to bind property as component input
       isActiveChanged: "&" // use to bind a METHOD that changes the property in the root component controller
    }
});

组件 B 模板 (component-B.html):

<img 
   src="res/large-loading.gif" 
   ng-if="!$ctrl.isActive" 
   ng-click="$ctrl.isActiveChanged({isActive: !$ctrl.isActive})"/>

根组件定义：

angular.module('app').component('root', {    
    templateUrl: 'root-component-view.html', ,                 
    controller: 'RootComponentCtrl'
});

根组件控制器：

angular.module('app').controller('RootComponentCtrl', ['$scope', function($scope) {
   // INPUT: This property is shared with both 'component A' and 'component B'
   $scope.isActive = true; 
   // OUTPUT: This method is shared with both 'component A' and 'component B' and can be called from both in order to change the value of $scope.isActive in the RootComponentCtrl
   $scope.isActiveChanged(isActive) {
      $scope.isActive = isActive;
   };
}]);

root-component-view.html 模板：

<div>
   <component-a 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-a>
   <component-b 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-b>
</div>

请注意，在组件 view/template 中使用 '$ctrl' 对象（如 '$ctrl.isActive' 访问绑定属性，而不是简单地使用 'isActive' 引用组件的$scope.isActive 属性在组件控制器中。

继续：共享属性在根组件控制器中设置使用：

$scope.isActive = true;

共享属性可以在根组件模板中看到，使用：

...>some html text content plus this is {{isActive}}<...

共享属性被传递给 html 中的 componentA 和 componentB，在根组件视图中定义它们使用：

<component-a 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-a>
   <component-b 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-b>

共享属性在 componentA / componentB 模板中可见，使用：

...>some html text content plus this is {{$ctrl.isActive}}<...

共享属性在 componentA / componentB 控制器中可见，使用：

   this.isActive // not $scope.isActive

可以通过调用以下方法从 componentA / componentB 控制器更改共享属性:

$ctrl.isActiveChanged({data: data})

实际上会调用根组件控制器中的方法并将更新后的值传递给 $scope 属性:

$scope.isActiveChanged(data)

Angular.js，如何将值从一个组件传递到任何其他组件

Angular.js, how to pass value from one component to any other

angularjs