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 :
推荐答案
我想您正在寻找
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屋!