从 DOM 中正确删除角度组件 [英] Remove angular components from DOM properly

问题描述

我创建了一个带有移除按钮的芯片组件.单击此按钮后，我想从 DOM 中删除整个组件，包括它的包装器 HTML 标记.

chips.component.ts

@Component({选择器:应用芯片"，模板:`<div class="close-btn";#myChips>我的筹码<i class="fa fa-times";咏叹调隐藏=真"；(click)=remove(myChips)"</i>

`})导出类 ChipsComponent {公共删除(自我:HTMLElement):无效{self.remove();}}

app.component.html

解决方案
老话题，但由于我很难尝试相同的...
遗憾的是，组件不能自动删除自己
所以我们有以下选择.
1:ViewContainerRef
您可以使用 componentFactoryResolver 生成组件，将它们存储到数组中，然后使用该数组完全删除这些组件
@ViewChild('chipsContainer', { read: ViewContainerRef, static: true })芯片容器:ViewContainerRef已加载芯片:任何[] = []addChip(属性:任何){让 componentFactory = this.componentFactoryResolver.resolveComponentFactory(应用芯片组件，)让 componentRef = this.componentLoaderContainer.createComponent(componentFactory)让 ref: any = componentRef.instanceref.init(this.loadedChips.lenght)//将用于知道应该删除哪个索引this.loadedChips.push(componentRef)//从芯片订阅EventEmitterref.emit删除.subscribe((index: number) => {this._removeChip(索引)})}私有_removeChip(索引:数字){this.loadedChips[index].destroy()this.loadedChips.splice(index, 1)}
然后，您应该在芯片组件中额外添加什么
导出类 AppChipsComponent {私有_index:数字@Output() emitDeletion = new EventEmitter()初始化(索引:数字){this._index = 索引}消除() {this.emitDeletion.emit(this._index)}}
2:Javascript
如果第一个例子看起来很复杂(如果你想要我的意见'^^)你可以简单地添加一个 id 到 html 或其他任何可以帮助您识别它的东西
然后，当点击 remove() 时，您可以获得它，并正确删除它.
<!-- 您可以使用 *ngFor 使其更简单 --><app-chips id="appChips-0";[id]=appChips-0"></app-chips><app-chips id="appChips-1";[id]=appChips-1"></app-chips><app-chips id="appChips-2";[id]=appChips-2"></app-chips>
导出类 AppChipsComponent {@Input() id!: 字符串消除() {document.getElementById(this.id).remove()}}
瞧.
I created a chips component, which has a remove button. After I click on this button, I want to remove the whole component from the DOM including it's wrapper HTML tag.
chips.component.ts
@Component({
    selector: "app-chips",
    template: `<div class="close-btn" #myChips>My chips
                   <i class="fa fa-times" aria-hidden="true" (click)="remove(myChips)"></i>
               </div>`
})
export class ChipsComponent {
    public remove(self: HTMLElement): void {
        self.remove();
    }
}
app.component.html
<app-chips></app-chips>
<app-chips></app-chips>
<app-chips></app-chips>
On the page it renders like this:
<app-chips>
    <div class="close-btn" #myChips>My chips
        <i class="fa fa-times" aria-hidden="true" (click)="remove(myChips)"></i>
    </div>
</app-chips>
After I click to remove button, it removes only the chips, but the <app-chips></app-chips> stays in DOM.
How can I remove the whole component?
Objective
I try to create chips component like this:
解决方案
Old topic, but since I struggle trying the same...
Sadly, a component cannot auto delete himself
So we have the following options.
1: ViewContainerRef
You could generate your component with a componentFactoryResolver, store them into an array, and then use this array to completely remove those components
<ng-template #chipsContainer></ng-template>

@ViewChild('chipsContainer', { read: ViewContainerRef, static: true })
chipsContainer: ViewContainerRef

loadedChips: any[] = []

addChip(attributes: any) {
  let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
    AppChipsComponent,
  )
  let componentRef = this.componentLoaderContainer.createComponent(componentFactory)
  let ref: any = componentRef.instance
  ref.init(this.loadedChips.lenght) // Will be used to know which index should be removed

  this.loadedChips.push(componentRef)

  // Subscribing to the EventEmitter from the chip
  ref.emitDeletion
    .subscribe((index: number) => {
       this._removeChip(index)
    })
}

private _removeChip(index: number) {
  this.loadedChips[index].destroy()
  this.loadedChips.splice(index, 1)
}
Then, what you should additionally add to your chip component
export class AppChipsComponent {
  private _index: number

  @Output() emitDeletion = new EventEmitter<boolean>()

  init(index: number) {
    this._index = index
  }

  remove() {
    this.emitDeletion.emit(this._index)
  }
}

2: Javascript
If the first example seems to complex (And it is, if you want my opinion '^^) you could simply add an id to the html or anything else that helps you recognize it
then, when clicking on remove() your can get it, and remove it properly.
<!-- You can use an *ngFor to make it simpler -->
<app-chips id="appChips-0" [id]="appChips-0"></app-chips>
<app-chips id="appChips-1" [id]="appChips-1"></app-chips>
<app-chips id="appChips-2" [id]="appChips-2"></app-chips>

export class AppChipsComponent {
  @Input() id!: string

  remove() {
    document.getElementById(this.id).remove()
  }
}
Voilà.

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