前端之家收集整理的这篇文章主要介绍了
AngularJs 1.5 – 组件不支持观察者,有什么工作？，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我已经将我的
自定义指令
升级到新的组件
方法。我读过该组件
不支持观察者。它是否正确？如果是这样，如何检测对象的更改。对于一个基本的例子我有
自定义组件my
Box它有一个子组件游戏绑定在游戏上。如果游戏组件中有更改游戏，我如何在my
Box中
显示警告消息？我理解有rxJS
方法是可能做到纯粹在角度？我的JS FIDDLE
JS FIDDLE
JS
var app = angular.module('myApp',[]);
app.controller('mainCtrl',function($scope) {
$scope.name = "Tony Danza";
});
app.component("myBox",{
bindings: {},controller: function($element) {
var myBox = this;
myBox.game = 'World Of warcraft';
//IF myBox.game changes,show alert message 'NAME CHANGE'
},controllerAs: 'myBox',templateUrl: "/template",transclude: true
})
app.component("game",{
bindings: {game:'='},controller: function($element) {
var game = this;
},controllerAs: 'game',templateUrl: "/template2"
})
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="/template">
<div style='width:40%;border:2px solid black;background-color:yellow'>
Your Favourite game is: {{myBox.game}}
<game game='myBox.game'></game>
</div>
</script>
<script type="text/ng-template" id="/template2">
<div>
</br>
Change Game
<textarea ng-model='game.game'></textarea>
</div>
</script>
Hi {{name}}
<my-Box>
</my-Box>
</div><!--end app-->
@H_
301_10@
使用ng-change指令
what alt methods available to observe obj state changes without using watch in preparation for AngularJs2?
您可以使用ng-change指令对输入更改做出反应。
<textarea ng-model='game.game'
ng-change="game.textChange(game.game)">
</textarea>
并且要将事件传播到父组件，事件处理程序需要作为子组件的属性添加。
<game game='myBox.game' game-change='myBox.gameChange($value)'></game>
JS
app.component("game",{
bindings: {game:'=',gameChange: '&'},controller: function() {
var game = this;
game.textChange = function (value) {
game.gameChange({$value: value});
});
},templateUrl: "/template2"
});
并在父组件中：
myBox.gameChange = function(newValue) {
console.log(newValue);
});
这是未来的首选方法。使用$ watch的AngularJS策略不可扩展，因为它是轮询策略。当$ watch监听器的数量达到2000左右时，UI变得缓慢。 Angular 2中的策略是使框架更具反应性，并避免将$ watch放在$ scope上。
使用$ onChanges生命周期钩子
在版本1.5.3中，AngularJS将$ onChanges生命周期钩子添加到$ compile服务。
从文件：
The controller can provide the following methods that act as life-cycle hooks:
- $onChanges(changesObj) – Called whenever one-way (
<) or interpolation (@) bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed,and the values are an object of the form { currentValue: ...,prevIoUsValue: ... }. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value.
—AngularJS Comprehensive Directive API Reference — Life-cycle hooks
$ onChanges钩子用于对组件的外部变化做出反应，单向绑定。 ng-change伪指令用于传递来自ng-model控制器的变化，绑定。
使用$ doCheck生命周期钩子
使用版本1.5.8，AngularJS将$ doCheck生命周期钩子添加到$ compile服务。
从文件：
The controller can provide the following methods that act as life-cycle hooks:
$doCheck() – Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example,this hook could be useful if you wish to perform a deep equality check,or to check a Date object,changes to which would not be detected by Angular’s change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes,you must store the prevIoUs value(s) for comparison to the current values.
—AngularJS Comprehensive Directive API Reference — Life-cycle hooks
在服务中使用RxJS
What about in a situation where you have a Service that’s holding state for example. How could I push changes to that Service,and other random components on the page be aware of such a change? Been struggling with tackling this problem lately
使用RxJS Extensions for Angular建立服务。
app.factory("DataService",function(rx) {
var subject = new rx.Subject();
var data = "Initial";
return {
set: function set(d){
data = d;
subject.onNext(d);
},get: function get() {
return data;
},subscribe: function (o) {
return subject.subscribe(o);
}
};
});
然后只需订阅更改。
app.controller('displayCtrl',function(DataService) {
var $ctrl = this;
$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});
this.$onDestroy = function() {
subscription.dispose();
};
});
客户端可以通过DataService.subscribe订阅更改，生产者可以使用DataService.set推送更改。
DEMO on PLNKR。
