如何动态移除角为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);的视图

有趣的是，在我的实现中，当我记录我的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;

此签名在角度更新期间从未更改。

您所指的stackblitz使用的是Range6Version，它在代码中利用了ViewEngine，但是在您的代码中，您使用的是角9和更高版本，其中使用的是常春藤编译器。

在堆栈闪电战中：

this.VCR.indexOf(componentRef as any);

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

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

和

ComponentRef._view === ViewRef._view in ViewEngine.

您应该传递的是ViewRef 实例，而不是：

this.VCR.indexOf(componentRef.hostView)

叉式斯塔克布利茨

该演示程序适用于常春藤(您的特殊情况)，但它也将在ViewEngine中工作。