如何在 angular 9 中动态删除组件？

Question

我必须创建一个多选过滤器，它可以接受要单击的多选项值，以便优化后端某些 get API 端点的响应。

每当用户点击一个选项时，一个“芯片”组件将动态呈现以了解用户：“嘿，你只是通过这个和那个过滤器选项过滤结果”

在互联网上环顾四周，我发现了这个stackblitz

在此代码示例中，我以某种方式理解这一行：

let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
let childComponentRef = this.VCR.createComponent(componentFactory);

我们在ViewContainerRef插入给定子组件的实例。 找到一个有点像这样的对象：

_data: Object { renderElement: <!--  -->, componentView: undefined, viewContainer: {…}, … }
_elDef: Object { nodeIndex: 4, bindingIndex: 0, outputIndex: 1, … }
_embeddedViews: Array(5) [ {…}, {…}, {…}, … ] //here   
_view: Object { def: {…}, parent: {…}, state: 1036, … }

在__embeddedViews对象下，动态生成的视图将堆叠起来

后来决定删除哪些视图，这个stackblitz的创建者只是获取组件并创建一个ViewContainerRef.indexOf(component)来获取存储组件的索引并验证动态生成的组件是否存在于该数组中。 然后他/她只是删除调用this.ViewContainerRef.remove(index);的视图this.ViewContainerRef.remove(index);

有趣的是，在我的实现中，当我记录我的ViewContainerRef我得到这个对象作为响应：

​_hostTNode: Object { type: 0, index: 23, injectorIndex: 34, … }
_hostView: Array(94) [ ..., {…}, 147, … ]
_lContainer: Array(12) [ <!-- 

芯片按预期成功动态添加，但没有 _embeddedViews，因此我无法动态删除它们，因为ViewContainerRef.indexOf(chip)将始终返回 -1 为“不，我这里没有“芯片””请可以有人启发我并展示我在这里做错了什么？

Answer 1

你有这样的不一致是因为你以错误的方式使用 ViewContainerRef API。

这是indexOf方法的签名：

abstract indexOf(viewRef: ViewRef): number;

这个签名在 Angular 更新期间从未改变。

您所指的 stackblitz 使用 Angular 6 版本，该版本在幕后利用 ViewEngine，但在您的代码中，您使用的是 Angular 9 及更高版本，其中 Ivy 编译器发挥作用。

在stackblitz你有：

this.VCR.indexOf(componentRef as any);

这意味着您正在传递 ComponentRef 实例而不是 ViewRef 实例。 它的工作是偶然的，因为 indexOf 方法看起来像：

ViewContainerRef_.prototype.indexOf = function (viewRef) {
  return this._embeddedViews.indexOf(viewRef._view);
};

和

ComponentRef._view === ViewRef._view中的ViewEngine 。

您应该改为传递ViewRef实例：

this.VCR.indexOf(componentRef.hostView)

分叉的堆栈闪电战

该演示适用于 Ivy（您的特定情况），但也适用于 ViewEngine。