admin管理员组文章数量:1026989
I am trying to get the index of a dynamically created ponent inside ViewContainerRef
I need to get the index so I can destroy the ponent if I wanted too.
Code Below
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef
ponentFactory
constructor(
private ponentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
) { }
ngAfterViewInit() {
thisponentFactory = thisponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}
addAssetOption() {
const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(thisponentFactory).instance
// how to get index of this dynamically generated ponent ^^^^
}
Trying to use
this.dynamicInsert.remove(index: number)
to destroy ponent
but I first need the index of the dynamically created ponent
this.dynamicInsert.indexOf(viewRef: viewRef)
I am trying to get the index of a dynamically created ponent inside ViewContainerRef
I need to get the index so I can destroy the ponent if I wanted too.
Code Below
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef
ponentFactory
constructor(
private ponentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
) { }
ngAfterViewInit() {
this.ponentFactory = this.ponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}
addAssetOption() {
const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(this.ponentFactory).instance
// how to get index of this dynamically generated ponent ^^^^
}
Trying to use
this.dynamicInsert.remove(index: number)
to destroy ponent
but I first need the index of the dynamically created ponent
this.dynamicInsert.indexOf(viewRef: viewRef)
2 Answers
Reset to default 6To get the index you can use indexOf method and hostView property:
const index = this.dynamicInsert.indexOf(dynamicComponent.hostView)
Also note that if you don't specify the index view container will destroy the last ponent:
remove(index?: number): void {
const viewData = detachEmbeddedView(this._data, index);
if (viewData) {
Services.destroyView(viewData);
}
}
export function detachEmbeddedView(elementData: ElementData, viewIndex?: number): ViewData|null {
const embeddedViews = elementData.viewContainer !._embeddedViews;
if (viewIndex == null || viewIndex >= embeddedViews.length) {
viewIndex = embeddedViews.length - 1;
}
So if you have only one ponent you don't need to pass index.
To remove all ponents you can use clear
method.
If you are looking to destroy the created ponent you may consider a shortcut by just subscribing to it's observable destroy:
addAssetOption() {
const dynamicComponent: ComponentRef<any> = this.dynamicInsert.createComponent(this.ponentFactory);
dynamicComponent.instance.destroy.subscribe(() => dynamicComponent.destroy())
}
and then upon removing event, in AssetOptionComponent, call it:
export class AssetOptionComponent {
destroy = new Destroyable();
delete(){
this.destroy.delete();
}
}
export class Destroyable extends Subject<any>{
delete() {
this.next();
}
}
Working demo
I am trying to get the index of a dynamically created ponent inside ViewContainerRef
I need to get the index so I can destroy the ponent if I wanted too.
Code Below
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef
ponentFactory
constructor(
private ponentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
) { }
ngAfterViewInit() {
thisponentFactory = thisponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}
addAssetOption() {
const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(thisponentFactory).instance
// how to get index of this dynamically generated ponent ^^^^
}
Trying to use
this.dynamicInsert.remove(index: number)
to destroy ponent
but I first need the index of the dynamically created ponent
this.dynamicInsert.indexOf(viewRef: viewRef)
I am trying to get the index of a dynamically created ponent inside ViewContainerRef
I need to get the index so I can destroy the ponent if I wanted too.
Code Below
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef
ponentFactory
constructor(
private ponentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
) { }
ngAfterViewInit() {
this.ponentFactory = this.ponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}
addAssetOption() {
const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(this.ponentFactory).instance
// how to get index of this dynamically generated ponent ^^^^
}
Trying to use
this.dynamicInsert.remove(index: number)
to destroy ponent
but I first need the index of the dynamically created ponent
this.dynamicInsert.indexOf(viewRef: viewRef)
2 Answers
Reset to default 6To get the index you can use indexOf method and hostView property:
const index = this.dynamicInsert.indexOf(dynamicComponent.hostView)
Also note that if you don't specify the index view container will destroy the last ponent:
remove(index?: number): void {
const viewData = detachEmbeddedView(this._data, index);
if (viewData) {
Services.destroyView(viewData);
}
}
export function detachEmbeddedView(elementData: ElementData, viewIndex?: number): ViewData|null {
const embeddedViews = elementData.viewContainer !._embeddedViews;
if (viewIndex == null || viewIndex >= embeddedViews.length) {
viewIndex = embeddedViews.length - 1;
}
So if you have only one ponent you don't need to pass index.
To remove all ponents you can use clear
method.
If you are looking to destroy the created ponent you may consider a shortcut by just subscribing to it's observable destroy:
addAssetOption() {
const dynamicComponent: ComponentRef<any> = this.dynamicInsert.createComponent(this.ponentFactory);
dynamicComponent.instance.destroy.subscribe(() => dynamicComponent.destroy())
}
and then upon removing event, in AssetOptionComponent, call it:
export class AssetOptionComponent {
destroy = new Destroyable();
delete(){
this.destroy.delete();
}
}
export class Destroyable extends Subject<any>{
delete() {
this.next();
}
}
Working demo
本文标签:
版权声明:本文标题:javascript - Angular, Get Index Of Dynamically Created Component Inside ViewContainerRef - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745106055a2134730.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论