1
私は単純なことをやろうとしています。角1.5非親コンポーネント間通信
受信者と呼ばれる子コンポーネント以外のコンポーネントにメッセージを送信したい送信者というコンポーネントがあります。送信側は受信側コンポーネントを見つけ、その属性値を変更します。
残念ながら、レシーバコンポーネントは属性が変更されたことを認識しません。
これが完了すると、同じ受信コンポーネントインスタンスを使用する複数の送信コンポーネントが存在するため、子コンポーネントにする必要はありません。
受信コンポーネントに新しい属性値が認識されるようにするにはどうすればよいですか？
ここplunkr
HTMLです：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" 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']);
これで問題は解決しました。 $ rootscope。$ broadcastは、コンポーネントが完全に実装されたバージョンのどこにあるかによって選択されました。 このトピックを読んでいるうちに、このgithubコードへの参照が見つかりました。より効率的かもしれません（元のコメントごとに追跡しました）。確認はしていませんが、リンクは次のとおりです：https://github.com/georapbox/angular-PubSub –