如何从ViewContainer角度删除特定视图 [英] how to delete a specific view from viewcontainer angular

问题描述

在以下示例中， https://stackblitz.com/edit/angular-1acvol

我已经使用TemplateRef创建了多个视图，并将它们附加到同一ViewContainer.但是我无法弄清楚如何从ViewContainer删除特定的View.

I have creating multiple views using a TemplateRef and am attaching them to the same ViewContainer. But I am unable to figure out how to delete a specific View from the ViewContainer.

我知道ViewContainerRef中有一些方法，例如remove，detach和indexOf，但是我找不到使用它们的方法.

I know there are methods in ViewContainerRef like remove, detach and indexOf but I can't find a way to use them.

我的模板是

  <ng-template #thumbnailTemplate let-description="description">
    <div>
      <a href="#" (click)="deleteView()">Delete {{description}}} (</a>
    </div>
  </ng-template> 

HTML是

<button #showTmplButton (click)="showTemplate()">{{buttonTitle}} </button>
<ng-container #vc></ng-container>

单击button后，模板的新实例将添加到ng-container.我希望在单击a时删除该特定视图.但是我怎么知道视图存储在ViewContainer的哪个索引上以及如何将其传递给deleteView函数?

On clicking button, a new instance of the template gets added to ng-container. I want that on clicking a, that specific view gets deleted. But how do I know at which index of ViewContainer the view is stored and how to pass it to the deleteView function?

添加视图的逻辑是

  showTemplate(){  

    let view:ViewRef = this.vc.createEmbeddedView(this.tmpl, {description: 'description '+(this.id++)}) 

  }

但是我不删除特定视图

deleteView(){
    /*what to do here.  
    this.vc.remove(...);
    */

     }

推荐答案

这似乎有效.我正在尝试从容器中删除视图，但是我需要删除该视图的引用.

This seems to work. I am trying to delete a view from a container but I needed the reference of the view to delete.

我学到的新东西很少

创建视图时，我们可以传递一个上下文对象.就像传递到模板的数据一样(将其视为参数，而模板就是函数).

When creating a view, we can pass a context object. This is like data passed to the template (see it as arguments and template is the function).

let view:ViewRef = this.vc.createEmbeddedView(this.tmpl, 
   {option:{divId:'thumbnail-'+(this.divId++),
    closeId:'close-'+(this.closeId++)
    }} );

如果模板是

 <ng-template #thumbnailTemplate let-option="option"  let-index="index">
    <div id="{{option.divId}}"> 
      <img> 
      <a href="#" id="{{option.closeId}}" (click)="deleteIt(option)">template  inserted at index {{option.index}}, {{option.divId}}, {{option.closeId}}</a>

    </div>
  </ng-template> 

然后let-option与option:匹配，{option:{divId:'thumbnail-'+(this.divId++), closeId:'close-'+(this.closeId++)}}是上下文对象，然后我可以在模板中将option用作{{option.divId}}.在这里进行解释-什么是$ implicit in angular 2?

then let-option matches with option:, {option:{divId:'thumbnail-'+(this.divId++), closeId:'close-'+(this.closeId++)}} is the context object and I can then use option in the template as {{option.divId}}. It is explained here - What is $implicit in angular 2?

一旦我学会了如何向模板传递数据，就想到使用createEmbeddedView并将index传递给模板，然后再用索引值更新视图的上下文对象.然后，我以后可以检索该值，并在ngContainerRef的remove中使用它来删除该视图.最初似乎可行，但是在我存储了视图0、1、2、3然后删除了索引1之后，容器将重新组织视图并为其分配新索引.但是，上下文对象中的值没有更新.

Once I learned how to pass data a template, I thought of using createEmbeddedView and passed index to it and then later also update the context object of the view with the index value. I can then later retrieve this value and use it in remove of ngContainerRef to remove that view. That seemed to work initially but after I stored say views 0,1,2,3 and then deleted index 1, the container would reorganise the views and assign them new indexes. However, the value in the context object didnt get updated.

因此，我没有将索引存储在上下文对象中，而是将ViewRef存储在上下文对象中，当我要删除视图时，我调用了indexOf以获取正确的索引值并在remove

Thus, instead of storing index, I store ViewRef in the context object and when I want to delete a view, I called indexOf to get the correct index value and use it in remove

代码.

  showTemplate(){  

   /*
   You need to pass an object with the keys that match the let-keyname syntax:
   The ng-template in html uses let-option and let-index so the object passed need to have index and option keys
   */

   //create view and pass context data
    let view:ViewRef = this.vc.createEmbeddedView(this.tmpl, 
   {option:{divId:'thumbnail-'+(this.divId++),
    closeId:'close-'+(this.closeId++)
    }} );

//after view is created, get its index and updat context. Note that ViewIndexRef was not in initial context object.
    view.context.option.viewIndexRef = view;//store ref of this view

  }

//pass the entier context object to the function
  deleteIt(option){
//get viewRef from context and then get index of the viewref
    let index = this.vc.indexOf(option.viewIndexRef)
//remove the view
    this.vc.remove(index);

     }

在html中，模板获取选项对象，并且a的click回调将其传递给deleteIt函数

In the html, template gets option object and the click callback of a passes it to deleteIt function

<ng-template #thumbnailTemplate let-option="option"  let-index="index">
    <div id="{{option.divId}}"> 
      <img> 
      <a href="#" id="{{option.closeId}}" (click)="deleteIt(option)">template  inserted at index {{option.index}}, {{option.divId}}, {{option.closeId}}</a>

    </div>
  </ng-template>

这篇关于如何从ViewContainer角度删除特定视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！