Ця відповідь описує п’ять методів для написання компонентів AngularJS 1.5 без використання спостерігачів.
Використовуйте ng-changeДирективу
які альтернативні методи доступні для спостереження змін стану obj без використання годинника для підготовки до 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});
});
},
controllerAs: 'game',
templateUrl: "/template2"
});
А в батьківському компоненті:
myBox.gameChange = function(newValue) {
console.log(newValue);
});
Це найкращий метод у майбутньому. Стратегія використання AngularJS $watchне є масштабованою, оскільки це стратегія опитування. Коли кількість $watchслухачів досягає близько 2000, інтерфейс стає млявим. Стратегія в кутових 2, щоб зробити каркас більш реактивної та уникати розміщення $watchна $scope.
Використовуйте $onChangesгачок життєвого циклу
З версією 1.5.3 , AngularJS додав послугу $onChangesпідключення життєвого циклу $compile.
З Документів:
Контролер може забезпечити наступні методи, які виконують роль гачків життєвого циклу:
- $ onChanges (changesObj) - Викликається, коли оновляються односторонні (
<) або інтерполяційні ( @) прив'язки. Це changesObjхеш, ключі якого є іменами пов'язаних властивостей, які змінилися, а значення є об'єктом форми { currentValue: ..., previousValue: ... }. Використовуйте цей гачок, щоб запускати оновлення в компоненті, наприклад, клонування зв’язаного значення, щоб запобігти випадковій мутації зовнішнього значення.
- Посилання на вичерпні директиви щодо AngularJS - Гаки життєвого циклу
$onChangesКрюк використовуються для реагувати на зовнішні зміни в компонент з <односторонній прив'язками. ng-changeДиректива використовується для зміни від поширення інформації про до ng-modelконтролера зовнішнього компонента з &прив'язками.
Використовуйте $doCheckгачок життєвого циклу
З версією 1.5.8 , AngularJS додав послугу $doCheckпідключення життєвого циклу $compile.
З Документів:
Контролер може забезпечити наступні методи, які виконують роль гачків життєвого циклу:
$doCheck()- Виклик на кожному повороті циклу дайджесту. Надає можливість виявляти зміни та діяти на них. Будь-які дії, які ви хочете зробити у відповідь на виявлені вами зміни, повинні викликатися з цього хука; реалізація цього не впливає на $onChangesвиклик. Наприклад, цей гачок може бути корисним, якщо ви хочете виконати глибоку перевірку рівності або перевірити об'єкт Date, зміни до якого не виявляються детектором змін Angular і, отже, не спрацьовують $onChanges. Цей гачок викликається без аргументів; якщо виявляє зміни, потрібно зберегти попередні значення для порівняння з поточними значеннями.
- Посилання на вичерпні директиви щодо AngularJS - Гаки життєвого циклу
Міжкомпонентне спілкування з 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 - Інтеркомпонентна комунікація
Підштовхування значень від служби з RxJS
Що можна сказати про ситуацію, коли у вас є служба, яка тримає стан, наприклад. Як я можу просувати зміни до цієї Служби, а інші випадкові компоненти на сторінці можуть знати про такі зміни? Останнім часом бореться із вирішенням цієї проблеми
Створіть службу за допомогою розширень RxJS для Angular .
<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.
DEMO на PLNKR .