SortableJs onAdd элемента, вход в компонент не меняется

Question

Прежде чем перейти к моему коду, пожалуйста, ознакомьтесь с вопросом, который я объяснил ниже:

У меня есть два списка Список A (Компонент 1) Список B (Компонент 2). Компонент данных (Компонент 3)

Все эти компоненты находятся в одном родительском компоненте.

При добавлении элемента из списка A в список B

newOptions: SortablejsOptions = {
animation: 200,
group: {
  name: 'AttributeDropAreas',
  put: true
},
sort: true,
onAddOriginal: (event) => {
 this.data = {'name': 'deepender', 'companyLoc':'USA'}
},

};

this.data является компонентом "Вывод в родительский компонент" и компонентом "Ввод в данные" (компонент 3). Теперь проблема в том, что в Компоненте 3 я не могу видеть свои данные в шаблоне. Теперь, если я щелкну эту область в любом месте компонента данных, данные будут видны.

Я перепроверил с родными событиями перетаскивания и перетаскивания, код работает нормально, проблема возникает только при использовании sortableJs. Также я заметил, что при вводе данных ngOnChanges (Component 3) хук angular жизненного цикла также не срабатывает, а срабатывает только при нажатии на эту область.

 @Input() set data {

this.name = data.name; }

HTML:

<div>{{name}}</div>

Answer 1

Как вы сказали, ngOnChanges не запускается, это означает, что цикл дайджеста не собрал изменения.

В этом случае вам придется вручную запустить цикл дайджеста. Поэтому я бы предложил создать новый сервис и предоставить его в родительском компоненте.

Теперь добавьте этот сервис во все 3 дочерних компонента.

Создайте Observable/Subject в сервисе, и oninit компонента DATA подпишитесь на этот Observable/Subject сервиса. В обратном вызове успеха этой подписки вы можете запустить метод detectChanges из ChangeDetectionReference.

Теперь, когда вы делаете вывод для родителя, в то же самое время делаете emit для этого Observable. На этот раз ваш взгляд должен забрать изменения.

Дайте мне знать, если это имеет смысл.

Answer 2

Эта проблема была решена моим архитектором и предложила такое же решение для автора сортируемых Js. Исправление было отправлено в библиотеку автором сортируемого JS и будет доступно в следующей версии.