Question

要解决problem with dragula，我想应该从DOM中添加和删除元素。目标是使用一些占位符元素来获取所需的布局（在所有分辨率下，居中容器中的左对齐元素）。这些占位符元素必须放在最后！

我尝试了以下方法：

ngIf：这里的问题是，可能会发生 invisible 元素未放置在末尾的情况。通过拖放，可能会发生以下情况：放置的元素位于最后一个位置，而 invisible 元素位于它们之间。
push elements on the array：在这里，我尝试在 ngClass 指令的帮助下添加 invisible 类，但是当我执行该操作时，它没有正确更新在推送数组中的项目时设置我的布尔变量。该类从未应用过。
ElementRef：从DOM中删除一个元素是可行的，但我不知道如何添加一个元素
Renderer2：我目前的做法是，removeChild()只会移除一个孩子，尽管第二次被称为

模板：

<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中删除。但是为什么呢？

我正在使用Angular v.2.5.5。

编辑：

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

Answer 1

要回答我自己的问题：

如问题所示，有多种添加或删除元素的方法（例如，通过Renderer2）。通常，不建议像Maryannah那样直接操作DOM。但这有时是不得已的方法。

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

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

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中添加/删除元素

1 个答案: