如何正确地从DOM中删除角度组件

Question

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

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>

在页面上它呈现如下：

<app-chips>
    <div class="close-btn" #myChips>My chips
        <i class="fa fa-times" aria-hidden="true" (click)="remove(myChips)"></i>
    </div>
</app-chips>

点击删除按钮后，它只删除了筹码，但<app-chips></app-chips>仍留在DOM中。

如何删除整个组件？

修改

我想要实现的是这样的芯片组件：

Answer 1

将组件选择器设置为html ID，如下所示：

@Component({
    selector: "#myChips", // like this
    template: `<div class="ibl-close-btn" #myChips>My chips
                   <i class="fa fa-times" aria-hidden="true" (click)="remove(myChips)"></i>
               </div>`
})

Answer 2

我不知道你在这里要做什么，但是如果你想要一个Angular组件不在你的HTML中，那就简单了

<app-chips *ngIf="yourCondition"></app-chips>

会做的伎俩。

编辑我想我弄明白了。

您不能自行删除组件。您需要通过路由到其他位置或通过从其父组件中删除它来删除它。

在您的情况下，您必须在应用程序组件中处理删除。当你想要删除芯片时，你可以做的是发出一个事件，以便父母知道何时删除它。