1

为了解决Dragula 的问题，我想我改为从 DOM 中添加和删除元素。目标是使用一些占位符元素来获得我想要的布局（在所有分辨率下居中容器中的左对齐元素）。这些占位符元素必须放在最后！

我尝试了以下方法：

  • ngIf：这里的问题是不可见元素可能没有放在最后。通过拖放，可能会发生拖放元素位于最后一个位置，而不可见元素位于其间的情况。
  • 在数组上推送元素：这里我尝试在ngClass指令的帮助下添加不可见的类，但是当我在数组上推送项目时设置我的布尔变量时，它没有正确更新它。该课程从未申请过。
  • 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. 7.2.5。

编辑：

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

4

1 回答 1

1

回答我自己的问题：

如问题所示，有多种方法可以添加或删除元素（例如 via 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]);
    }
}
于 2019-06-06T11:21:46.820 回答