Angular2，如何在viewContianer中查找视图索引 [英] Angular2 , How to find index of a view inside a viewContianer

问题描述

比方说，使用我有一个指令，该指令可以在viewContianerRef中动态加载组件:

Let's say using I have a directive that can load components dynamically in it's viewContianerRef :

@Directive( { selector : '[loader-ref]' } )
export class LoaderDirective {
    constructor ( private cd : ChangeDetectorRef ,
                  private viewContainer : ViewContainerRef ,
                  private componentResolver : ComponentResolver ) {
    }
    getIndexOf(viewRef:ViewRef){

       return this.viewContainer.indexOf(viewRef);
    }
    createComponent ( dialogComponent : { new() : any } ) : Promise<ComponentRef<any>> {
        return this.componentResolver
                   .resolveComponent( dialogComponent )
                   .then( ( componentFactory : ComponentFactory<any> ) => {
                       return this.viewContainer.createComponent( componentFactory );
                   } );
    }
}

我应该动态加载的组件:

My component that should be loaded dynamically :

@Component({
  selector:'my-dynamic-component'
})
export class myDynamicComponent{

   // Is there any way to get this component's ViewRef , or HostView? 


}

我正在使用LoaderDirective这样动态地加载组件:

And I'm using LoaderDirective to load a component dynamically like this :

我的应用程序:

@Component( {
    selector   : 'example' ,
    template:` <button (click)='getIndex()'></button> <div loader-ref></div>`
})
export class ExampleComponent {
    @ViewChild( LoaderDirective ) loaderDirective : LoaderDirective;


    ngOnInit(){
         let waitForChunk = require( 'myDynamicComponent.ts' );
    waitForChunk( ( file ) => {
        this.loaderDirective
            .createComponent( file[ 'default' ] )
            .then( ( componentRef : ComponentRef<any> ) => {
                componentRef.changeDetectorRef.detectChanges();
            } );
    } );

    }


    getIndex(){
         // Here I want to get index of myDynamicComponent which is loaded 
        ////What do I need to do ?   ??
         let index = this.loaderDirective.getIndexOf(what to pass ? )

         console.log('My index is : '+index);

    }
}

这是有效的，但是知道我的问题:

This is working , but know my question :

在我的指令中，我有一个viewContainerRef，它有一个名为

Inside my directive , I have a viewContainerRef , which has a method called indexOf .

该方法应该返回viewContainerRef内已加载组件的索引，但我不知道它的工作方式和使用方法:

This method is supposed to return the index of the loaded component inside the viewContainerRef , but I don't know how it works and how to use it :

推荐答案

我想您正在寻找hostView属性/index/ComponentRef-class.html"rel =" nofollow> ComponentRef

I suppose you are looking for hostView property of ComponentRef

loadedView: ViewRef;
...
  this.loaderDirective
    .createComponent(myDynamicComponent)
    .then((componentRef: ComponentRef<any>) => {
      componentRef.changeDetectorRef.detectChanges();
      this.loadedView = componentRef.hostView; <== this line
    });
...
getIndex(){
  let index = this.loaderDirective.getIndexOf(this.loadedView);
  console.log('My index is : '+index);
}

但是在您的情况下，由于您要执行触发操作，因此该值始终等于0:

But in your case it will always be equals 0 because you're firing:

this.viewContainer.clear();

另请参阅 柱塞示例 ，以了解 angular2 2.0.0

更新1

如果您想访问myDynamicComponent指令中的视图，则可以利用以下内容:

if you want to have access to view inside the myDynamicComponent directive then you can leverage the following:

@Component({
  selector: 'my-dynamic-component'
})
export class myDynamicComponent {
  public view: ViewRef;
}

...
 this.loaderDirective
    .createComponent(myDynamicComponent)
    .then((componentRef: ComponentRef<any>) => {
      componentRef.changeDetectorRef.detectChanges();
      componentRef.instance.view = componentRef.hostView; <== add this line
    });

我更新了 柱塞

I updated Plunker

Update2

您还可以通过这种方式获取viewRef:

You can also to get viewRef this way:

constructor(private injector: Injector) {}

...
var viewRef = this.injector._view.ref;

柱塞

Plunker

但是在这种情况下，您将使用Injector的私有属性. 这是不好的做法.

But in this case you will use private propery of Injector. It's bad practice.

这篇关于Angular2，如何在viewContianer中查找视图索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！