角度：從DOM中添加/刪除元素

Question

為了解決Dragula的問題，我想我改為從DOM中添加和刪除元素。 目標是使用一些占位符元素來獲取所需的布局（在所有分辨率下，居中容器中的左對齊元素）。 這些占位符元素必須放在最后！

我嘗試了以下方法：

• ngIf ：這里的問題是可能發生不可見元素未放置在末尾的情況。 通過拖放，可能會發生以下情況：放置的元素在最后，而看不見的元素在它們之間。
• 在數組中推送元素 ：在這里，我嘗試在ngClass指令的幫助下添加不可見的類，但是當我在數組中推送項目時設置布爾變量時，它沒有正確更新它。 該類從未應用過。
• ElementRef ：從DOM中刪除一個元素是ElementRef ，但是我沒有弄清楚如何添加一個元素
• 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。

編輯：

這是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]);
    }
}