[英]Angular 4 removing dynamically added components
使用類似這樣的內容: https : //netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d我要添加多個組件,問題是如何稍后基於單擊的內容刪除這些組件? 我要嘗試做的是創建面包屑,然后在單擊面包屑時,將其下面的所有內容全部刪除。 要創建它們,我使用以下代碼:
createCrumb(name, key, level){
let data = {name:name, key:key, level,level, diagram: this.diagram};
const factory = this.this.resolver.resolveComponentFactory(BreadCrumbsButton);
let componentRef = this.container.createOmponent(factory);
(<BreadCrumbsButton>componentRef.instance).data = data;
}
所有這些都可以完美地工作,但是我要加倍。 問題是如何在剩下其余部分的同時刪除特定的部分?
您可以在上面調用destroy方法:
createComponent(type) {
this.container.clear();
const factory: ComponentFactory = this.resolver.resolveComponentFactory(AlertComponent);
this.componentRef: ComponentRef = this.container.createComponent(factory);
setTimeout(()=>{
this.componentRef.destroy(); <--------------------
}, 2000);
}
我將超時用於演示目的,以便可以在屏幕上看到呈現的組件。
您現在可以使用subject
而不是interface
來進行組件的通信
從父級移除子級組件,因此必須開始它們之間的通信,但是如何進行呢?
在這種情況下使用接口
發生了什么 ?
父級正在創建子級,當子級嘗試刪除自己時,它會通過接口告訴其父級刪除它,因此父級也會這樣做。
import { ComponentRef, ComponentFactoryResolver, ViewContainerRef, ViewChild, Component } from "@angular/core";
// Parent Component
@Component({
selector: 'parent',
template: `
<button type="button" (click)="createComponent()">
Create Child
</button>
<div>
<ng-template #viewContainerRef></ng-template>
</div>
`
})
export class ParentComponent implements myinterface {
@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;
//manually indexing the child components for better removal
//although there is by-default indexing but it is being avoid for now
//so index is a unique property here to identify each component individually.
index: number = 0;
// to store references of dynamically created components
componentsReferences = [];
constructor(private CFR: ComponentFactoryResolver) {
}
createComponent() {
let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
let currentComponent = componentRef.instance;
currentComponent.selfRef = currentComponent;
currentComponent.index = ++this.index;
// prividing parent Component reference to get access to parent class methods
currentComponent.compInteraction = this;
// add reference for newly created component
this.componentsReferences.push(componentRef);
}
remove(index: number) {
if (this.VCR.length < 1)
return;
let componentRef = this.componentsReferences.filter(x => x.instance.index == index)[0];
let component: ChildComponent = <ChildComponent>componentRef.instance;
let vcrIndex: number = this.VCR.indexOf(componentRef)
// removing component from container
this.VCR.remove(vcrIndex);
this.componentsReferences = this.componentsReferences.filter(x => x.instance.index !== index);
}
}
// Child Component
@Component({
selector: 'child',
template: `
<div>
<h1 (click)="removeMe(index)">I am a Child, click to Remove</h1>
</div>
`
})
export class ChildComponent {
public index: number;
public selfRef: ChildComponent;
//interface for Parent-Child interaction
public compInteraction: myinterface;
constructor() {
}
removeMe(index) {
this.compInteraction.remove(index)
}
}
// Interface
export interface myinterface {
remove(index: number);
}
如果要進行測試,只需創建一個像comp.ts這樣的文件,然后將該代碼粘貼到該文件中,然后添加對app.module.ts的引用
@NgModule({
declarations: [
ParentComponent,
ChildComponent
],
imports: [
//if using routing then add like so
RouterModule.forRoot([
{ path: '', component: ParentComponent },
{ path: '**', component: NotFoundComponent }
]),
],
entryComponents: [
ChildComponent,
],
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.