Как мы можем добавить дочерние узлы к ng-контенту без повторного рендеринга Angular Elements?

Дочерние узлы, которые я добавляю, неправильно расположены внутри области ng-content пользовательского элемента, который я создал с помощью элемента Angular.

Я попытался повторить свою проблему в этом Stackblitz.

Текущее решение

Это сработает, если я добавлю дочерние узлы в созданный экземпляр пользовательского элемента перед добавлением в dom .

Ожидаемое решение

Есть ли способ, которым я могу легко добавить дочерний узел в свой пользовательский элемент angular, используя javascript (appendChild) без повторного рендеринга всего компонента.

Спасибо.


javascript angular custom-element angular-elements
person Sachin    schedule 15.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать getElementsByClassName:

onAddChild2(e: string) {
  let div = document.createElement("div");
  div.innerHTML = e;

  const eHost = document.getElementsByClassName('container')[0];
  eHost.appendChild(div);
}

Проверьте код Stackblitz, который я разветвил из вашего кода: https://stackblitz.com/edit/angular-elements-exp-v3r4b3

person Kari F.    schedule 16.12.2019
comment
Я знаю это, но хотел проверить, есть ли у нас решение, родное для angular, спасибо. - person Sachin; 16.12.2019
comment
Ну на самом деле вы не просили нативное решение. Вы разместили stackblitz, который не работал, и спросили: есть ли способ, которым я могу легко добавить дочерний узел к моему пользовательскому элементу angular, используя javascript (appendChild) без повторного рендеринга всего компонента. - person Kari F.; 16.12.2019

arrow_upward
1
arrow_downward

Это не способ Angular. Вы не должны напрямую манипулировать DOM. Вы должны привязать массив к своему шаблону.

children = ['New Child'];

onAddChild() {
  this.children.push('New child');
}

и в шаблоне

<div *ngFor="let child of children">{{child}}</div>
person Adrian Brand    schedule 16.12.2019
comment
Да, но не хочу использовать *ngFor, так как он перерисовывает весь список. - person Sachin; 16.12.2019
comment
Нет, обнаружение изменений Angular отображает то, что изменилось, и отображает только то, что было обновлено. Если вы добавите значение в конец массива, он добавит только новый узел, он не будет перерисовывать весь массив. Вы должны прочитать о том, как работает обнаружение изменений Angular. Это нативное решение Angular, которое вы ищете. - person Adrian Brand; 16.12.2019