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

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

javascript angular typescript

Javascript 如何在angular 9中动态删除组件？,javascript,angular,typescript,Javascript,Angular,Typescript,我必须创建一个多选过滤器，该过滤器将接受要单击的多选项值，为了优化后端上某些get API端点的响应每当用户点击一个选项，一个芯片组件就会自动呈现给用户：嘿，你只是用这个和那个过滤选项过滤结果在互联网上四处寻找，我发现了这个在这个代码示例中，我理解了以下几行：让componentFactory=this.CFR.resolveComponentFactoryChildComponent；让childComponentRef=this.VCR.CreateComponentFactor

我必须创建一个多选过滤器，该过滤器将接受要单击的多选项值，为了优化后端上某些get API端点的响应

每当用户点击一个选项，一个芯片组件就会自动呈现给用户：嘿，你只是用这个和那个过滤选项过滤结果

在互联网上四处寻找，我发现了这个

在这个代码示例中，我理解了以下几行：

让componentFactory=this.CFR.resolveComponentFactoryChildComponent；让childComponentRef=this.VCR.CreateComponentFactory；我们在ViewContainerRef中插入给定子组件的实例。我打开console和console.logViewContainerRef，发现一个类似以下内容的对象：

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

芯片按预期动态添加成功，但没有嵌入视图，因此我无法动态删除它们，因为ViewContainerRef.indexOfchip将始终返回-1作为否，我这里没有芯片

有人能告诉我我做错了什么吗？

您有这样的不一致性，因为您以错误的方式使用ViewContainerRef API

这是方法的签名：

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

您提到的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.\u视图===ViewEngine中的ViewRef.\u视图

您应该传递ViewRef实例：

该演示可以在您的特定情况下使用IVYY，但也可以在ViewEngine中使用。

您使用ViewContainerRef API的方式错误，因此存在这种不一致性