감시자 없이 구성 요소 작성
이 답변은 감시자 를 사용하지 않고 AngularJS 1.5 구성 요소를 작성하는 데 사용하는 5 가지 기술을 설명 합니다.
ng-change지시어 사용
AngularJs2를 준비 할 때 watch를 사용하지 않고 obj 상태 변경을 관찰 할 수있는 대체 메서드는 무엇입니까?
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});
});
},
controllerAs: 'game',
templateUrl: "/template2"
});
그리고 부모 구성 요소에서 :
myBox.gameChange = function(newValue) {
console.log(newValue);
});
이것은 앞으로 선호되는 방법입니다. 사용하는 AngularJS 전략은 $watch폴링 전략이기 때문에 확장 가능하지 않습니다. $watch청취자 수가 약 2000 명에 이르면 UI가 느려집니다. 각도 2의 전략 프레임 워크 반응성과 피할 배치하는 것입니다 $watch에를 $scope.
사용 $onChanges수명주기 후크를
으로 버전 1.5.3 , AngularJS와 추가 된 $onChanges받는 라이프 사이클 후크 $compile서비스를.
문서에서 :
컨트롤러는 수명주기 후크 역할을하는 다음 메서드를 제공 할 수 있습니다.
- $ onChanges (changesObj)-단방향 (
<) 또는 보간 ( @) 바인딩이 업데이트 될 때마다 호출 됩니다. 는 changesObj그 키 변경된 결합 속성의 이름은 해쉬이고, 값은 형태의 목적이다 { currentValue: ..., previousValue: ... }. 이 후크를 사용하여 바인딩 된 값 복제와 같은 구성 요소 내에서 업데이트를 트리거하여 외부 값의 우발적 변형을 방지합니다.
— AngularJS 포괄적 인 지시어 API 참조-수명주기 후크
$onChanges후크와 성분으로 외부 변화에 반응하는 데 사용되는 <일방향 바인딩. 이 ng-change지시문은 바인딩을 사용 ng-model하여 구성 요소 외부의 컨트롤러 에서 변경 사항을 전파하는 데 사용됩니다 &.
사용 $doCheck수명주기 후크를
으로 버전 1.5.8 , AngularJS와 추가 된 $doCheck받는 라이프 사이클 후크 $compile서비스를.
문서에서 :
컨트롤러는 수명주기 후크 역할을하는 다음 메서드를 제공 할 수 있습니다.
$doCheck()-다이제스트 사이클의 매 턴마다 호출됩니다. 변경 사항을 감지하고 조치를 취할 수있는 기회를 제공합니다. 감지 한 변경 사항에 대한 응답으로 수행하려는 조치는이 후크에서 호출되어야합니다. 이 구현은를 $onChanges호출 하는시기에 영향을주지 않습니다 . 예를 들어,이 후크는 깊은 동등성 검사를 수행하거나 Angular의 변경 탐지기에 의해 감지되지 않아 트리거되지 않는 Date 객체를 확인하려는 경우 유용 할 수 있습니다 $onChanges. 이 후크는 인수없이 호출됩니다. 변경 사항을 감지하는 경우 현재 값과 비교하기 위해 이전 값을 저장해야합니다.
— AngularJS 포괄적 인 지시어 API 참조-수명주기 후크
구성 요소 간 통신 require
지시문은 서로 통신 할 수 있도록 다른 지시문의 컨트롤러 가 필요할 수 있습니다 . 이는 require 속성에 대한 개체 매핑을 제공하여 구성 요소에서 수행 할 수 있습니다 . 개체 키는 필수 컨트롤러 (개체 값)가 필요한 구성 요소의 컨트롤러에 바인딩되는 속성 이름을 지정합니다.
app.component('myPane', {
transclude: true,
require: {
tabsCtrl: '^myTabs'
},
bindings: {
title: '@'
},
controller: function() {
this.$onInit = function() {
this.tabsCtrl.addPane(this);
console.log(this);
};
},
templateUrl: 'my-pane.html'
});
자세한 내용은 AngularJS 개발자 가이드-Intercomponent Communicatation을 참조하십시오.
RxJS 를 사용하여 서비스에서 값 푸시
예를 들어 상태를 유지하는 서비스가있는 상황에서는 어떻습니까? 변경 사항을 해당 서비스에 푸시하고 페이지의 다른 임의의 구성 요소가 이러한 변경 사항을 인식하는 방법은 무엇입니까? 최근이 문제를 해결하는 데 어려움을 겪고 있습니다.
Angular 용 RxJS Extensions 로 서비스를 구축합니다 .
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
var app = angular.module('myApp', ['rx']);
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.
PLNKR 의 데모 .