Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2018, 12:58
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Как отследить изменение переменной в компоненте Angular 2+?
Нужно следить за изменением переменной в компоненте и вызывать колбэк. Если в первом Ангуляре это делалось с помощью watch, то во втором не ясно как делать.

Либо вызывать в разных местах (на ngModelChange, на click кнопки и т.д. там где меняется переменная)
Либо делать отдельный компонент, запихивать эту переменную ему в параметры и обрабатывать с помощью геттеров и сеттеров
Либо сделать проверку в ngDoCheck с использованием differ и т.п.

Все не особо удобные. Есть другие способы?

http://plnkr.co/edit/2QttX9f2UiuxPL2IEx9X?p=preview

Последний раз редактировалось Shitbox2, 12.04.2018 в 15:02.
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2018, 15:13
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Shitbox2,
Observable?
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2018, 16:17
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Да, Observable. А как? Придется использовать Reactive Form, что не очень хотелось бы. Если есть собственные компоненты, то их так же придется интергрировать в ангуляровские формы. Как это без Reactive Form сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 12.04.2018, 20:20
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Shitbox2,
Можно просто сказать что переменная - это Subject. Кому надо - подпишутся. А при изменении данных через метод next прокидывать новое значение и все "подписчики" получат уведомдение.
Может есть какой-то конкретный пример?
Ответить с цитированием
  #5 (permalink)  
Старый 13.04.2018, 18:35
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Конкретный пример только тот, что в ссылке в первом сообщении.

Но, в общем, ситауция весьма распространенная. У нас есть какая-то форма. Мы её можем заполнять как ручками, так и брать информацию из query-параметров адресной строки или из шаблона, например. Т.е. есть несколько способов заполнения. Так же в форме у нас есть некая логика, зависящая от состояния определенных полей. Например, выбираем страну - появляется список городов, выбираем город - появляется список улиц, выбираем улицу и ставим какую-то галочку - появляются ещё поля. Заполняем всё это - отправляем форму.

Тут, конечно, напрашивается реактивный подход и, соответственно, использование реактивных ангуляровских форм, но это уже попахивает переусложнением. В этом случае повесить на переменную обсервер видится наиболее предпочтительным вариантом. UI будет синхронизироваться с состоянием автоматически, но в то же время мы сможем прозрачно работать с переменными и аякс-запросами как с потоками и пилить на них логику.

Как просто сказать, что переменная это Subject?
Ответить с цитированием
  #6 (permalink)  
Старый 13.04.2018, 19:09
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Shitbox2,
Не понимаю какое переусложнение будет, если взять за основы реактивные формы. Я бы так и сделал.
Цитата:
Как просто сказать, что переменная это Subject?
const variable = new BehaviorSubject(initialValue);
Ответить с цитированием
  #7 (permalink)  
Старый 13.04.2018, 19:46
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

И как это поможет? ngModel не понимает таких переменных
<input [(ngModel)]="variable">


Переусложнение, потому что и по коду больше писанины и более глубокое понимание Англуляра требуется и динамические формы не так очевидно делаются. В общем, написать-то можно но потом с поддержкой замучаешься.

P.S. Тут только что-то подобное может подойти
makeObservable(this.value).subscribe(...)

Но поддерживает ли Angular/rx такое из коробки?

Последний раз редактировалось Shitbox2, 13.04.2018 в 19:50.
Ответить с цитированием
  #8 (permalink)  
Старый 16.04.2018, 07:59
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Shitbox2,
http://plnkr.co/edit/CsQHAQlDSbT4mZeG730M?p=preview
Ответить с цитированием
  #9 (permalink)  
Старый 16.04.2018, 09:17
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Ну, тут тоже переменная никак не обозревается. Всё на геттерах и сеттерах построено
Ответить с цитированием
  #10 (permalink)  
Старый 16.04.2018, 09:20
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Shitbox2,
Цитата:
тут тоже переменная никак не обозревается
?...это же Observable, значит можно подписаться и получать уведомления. Строка 23 для чего?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отследить переход по "Сохранить по ссылке как..." Serg_pnz Серверные языки и технологии 2 31.05.2013 11:25
Как отследить пропал ли текст placeholder-а при фокусе на поле ввода z1987 Общие вопросы Javascript 2 19.12.2012 11:10
Значение переменной, как имя для другой переменной Kosty@n Общие вопросы Javascript 2 15.12.2012 22:58
как реализовать свою функцию к переменной czp Общие вопросы Javascript 2 01.01.2012 19:52
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 15:25