Question

我试图做一些简单的事情。

我有一个名为sender的组件，它想要将消息发送到名为receiver的非子组件。发件人找到接收器组件并更改其属性值。

不幸的是，接收器组件没有识别出它的属性已被更改。

完成此操作后，将有多个发送组件将使用相同的接收组件实例，因此我不想将其作为子组件。

如何让接收组件识别它有一个新的属性值？

这里是plunkr

HTML：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8"  
            src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
  </head>
  <body>
    <h1>Test sending values to a component from a non-parent component</h1>
    <sender id="SendingComponent"></sender>
    <h2>past send tag</h2>
    <receiver id="ToComponent"  textvalue="defaultvalue"></receiver>
    <h2>Past receiver tag</h2>
    <script src="script.js"></script>
  </body>
</html>

使用Javascript：

var app = angular.module('app',[])
  .component("sender", {
    template: "<div> I send messages to receiver.  
       Receiver should say 'a new sent value'.</div>",
    controller: [function () {
      var ctrl = this;
      ctrl.$oninit = function () {
      var receiver = document.getElementById('ToComponent');
        receiver.attributes.setNamedItem('textvalue', 'a new sent value');
      $timeout(function () { $scope.apply();});
    };
  }]})
  .component("receiver", {
    template: '<div>I received this message: 
      {{receiverCtrl.textvalue}}</div>',
    bindings: {
      textvalue: '<'  // using '@' makes the default value work, 
                      // but is described as a one time bind
    },
    controllerAs: 'receiverCtrl',
    controller: [function () {
      var ctrl = this;
      ctrl.$onChanges = function (changesObj) {
        if (changesObj.textvalue !== undefined) {
          ctrl.textvalue = changesObj.textvalue.currentValue;
        }
      }
    }]
});

angular.bootstrap(document, ['app']);

Answer 1

听起来我应该像处理事件一样。也许你的发送者会$broadcast要改变的价值，你的接收者会倾听那个事件并做任何需要做的事情。

这样做的好处还在于您的发送者无需操纵DOM来发送消息。这样，如果需要，您只能将DOM操作留给接收器。

Angular 1.5非父组件到组件通信

1 个答案: