角度:从DOM中添加/删除元素 [英] Angular: Add/Remove elements from DOM

问题描述

要解决 draguula问题我以为我改为从DOM中添加和删除元素.目标是使用一些占位符元素来获取所需的布局(在所有分辨率下，居中容器中的左对齐元素).这些占位符元素必须放在最后！

To work around a problem with dragula I thought I add and remove the elements from the DOM instead. The goal is to use some placeholder elements to get the layout I want (left aligned elements in a centered container at all resolutions). These placeholder elements have to be placed at the end!

我尝试了以下方法:

• ngIf :这里的问题是可能会发生未放置 invisible 元素的情况在末尾.通过拖放可能会发生以下情况:放置的元素位于最后一个位置，而 invisible 元素位于它们之间.
• 将元素推送到数组上:在这里，我尝试使用 ngClass 指令的帮助，但当我在数组中推送项目时设置布尔变量时，它没有正确更新.该类从未应用过.
• ElementRef :从DOM中删除一个元素是可行的，但我没有想到了解如何添加一个
• Renderer2 :我目前的方法，其中 removeChild()尽管第二次被叫，却只能移除一个孩子

• ngIf: problem here is that it can happen that the invisible elements are not placed at the end. Through drag & drop it can happen that the dropped element is on the last place and the invisible elements are between.
• push elements on the array: here I tried to add the class invisible with the help of the ngClass directive, but it didn't update it correctly, when I set my boolean variable while pushing items on the array. The class was never applied.
• ElementRef: removing an element from the DOM worked, but I didn't figured out how to add one
• Renderer2: my current approach, where removeChild() only removes one child despite it is called a second time

模板:

<div #button_area class="button_area" dragula="cards" [dragulaModel]="cards" (dragulaModelChange)="cards = $event">
  <div *ngFor="let c of cards" id="{{ 'card-' + c.id }}" [ngClass]="calculateClasses(c)" [ngStyle]="calculateStyles(c)" (click)="onSelect($event, c)">
    <!-- some irrelevant html code -->
  </div>
</div>

打字稿:

@ViewChild('button_area') private buttonAreaElement: ElementRef;

constructor(public dragulaService: DragulaService,
          private renderer: Renderer2) {
    // something irrelevant
}

addPlaceholderElements() {
    const placeholder = this.buttonAreaElement.nativeElement.querySelector('.invisible');

    if (placeholder === null) {
        const placeholder1 = this.renderer.createElement('div');
        this.renderer.addClass(placeholder1, 'card');
        this.renderer.addClass(placeholder1, 'invisible');
        this.renderer.appendChild(this.buttonAreaElement.nativeElement, placeholder1);

        const placeholder2 = this.renderer.createElement('div');
        this.renderer.addClass(placeholder2, 'card');
        this.renderer.addClass(placeholder2, 'invisible');
        this.renderer.appendChild(this.buttonAreaElement.nativeElement, placeholder2);
    }
}

removePlaceholderElements() {
    const placeholder1 = this.buttonAreaElement.nativeElement.querySelector('.invisible');
    if (placeholder1 !== null) {
        this.renderer.removeChild(this.buttonAreaElement.nativeElement, placeholder1);
    }

    const placeholder2 = this.buttonAreaElement.nativeElement.querySelector('.invisible');
    if (placeholder2 !== null) {
        this.renderer.removeChild(this.buttonAreaElement.nativeElement, placeholder2);
    }
}

如您所见，我为此使用了 querySelector() 方法.找到了 placeholder2 ，但未将其从DOM中删除.但是为什么呢?

As you can see I use the querySelector() method for this. placeholder2 is found, but not removed from the DOM. But why?

我正在使用Angular v.2.5.5.

I'm using Angular v. 7.2.5.

此处是MVCE.在那里，不会出现删除问题.还没有弄清楚区别是什么?为什么 removeChild()不能删除孩子?这是时间问题吗?

Here is the MVCE. There the issue with the deletion doesn't occur. Haven't figured out what the difference is ... Why doesn't removeChild() remove the child? Is this a timing issue?

推荐答案

要回答我自己的问题:

如问题所示，有多种添加或删除元素的方法(例如，通过 Renderer2 ).通常，不建议直接以 Maryannah 来操作DOM.说.但这有时是不得已的方法.

As shown in the question, there are multiple ways to add or remove elements (e.g. via Renderer2). In general, it is not advisable to manipulate the DOM directly as Maryannah stated. But sometimes it is the last resort.

^{_{为了获得正确的布局，我使用了占位符元素.当我使用占位符元素时，这些可能是Dragula的位置.我不希望它们作为放置位置.因为我无法排除这些占位符元素，所以我认为我可以根据需要添加和删除它们.在上一次尝试中，我使用了Renderer2.在我的真实项目中，removeChild不会删除子项，并且(两个)占位符元素中的一个会保留.在MVCE中并非如此，但我不知道为什么.}}

我的解决方法所缺少的是完全清除了CSS类 invisible 的所有子项.现在，这在我的本地开发环境中也有效:

What was missing for my workaround of the workaround is the complete removal of all childs with the CSS class invisible. This now does also work in my local development environment:

removePlaceholderElements() {
    const placeholders = this.buttonAreaElement.nativeElement.querySelectorAll('.invisible');
    for (var i = 0; i < placeholders.length; i++) {
        this.renderer.removeChild(this.buttonAreaElement.nativeElement, placeholders[i]);
    }
}

这篇关于角度:从DOM中添加/删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！