Question

我遇到了破坏动态组件的问题。一些提示我会非常感激。这是我的根组件，它在页面上完美地添加了服务中的一些组件：

/*Root*/
@Component({
selector: 'convertors',
template: "<div #target></div>"})

export class AppComponent {
@ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;

private componentRef: ComponentRef<any>;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
            private viewContainerRef: ViewContainerRef){}

addComponent(){
    let someComponent = this.service.getService("someComponent");
    const factory = this.componentFactoryResolver.resolveComponentFactory(someComponent);
    this.componentRef = this.target.createComponent(factory);
}}

这是我的子组件，由根组件添加。它必须自我毁灭：

@Component({
selector: 'convertors',
template: "<button (click)="deleteComponent()" >Delete</button>"})
export class someComponent{
    deleteComponent(){
    /*How could I implement this function?*/
    }
}

我怎样才能实现deleteComponent（）方法？谢谢！

Answer 1

好的，我的解决方案使用消息服务。如果您不知道它的作用，请查看here。它非常简单。首先，我为任何动态组件分配唯一ID。接下来，我会在地图中继续引用组件及其ID。

  private componentRef: ComponentRef<Component>;

  onComponent(event: string){
    let component = "ref to any component"
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    let componentRef = this.target.createComponent(factory);
    let id = "id" + this.index;
    (<any>componentRef.instance).componentId = id;
    this.idMap.set(id, componentRef);
    this.componentRef = componentRef;
    this.index += 1;
  }

其次，事件点击子视图通过消息服务将其ID发送给父母。考虑到＆＃34; componentId：string＆＃34;在孩子身上宣布。但它是在父母中分配的！

<a (click)="deleteComponent()"></a>

private componentId: string;

deleteComponent() : void {
    this.messageService.sendMessage(this.componentId);
}

最后，我们的父母从消息服务接收id。接下来，它会在地图中查找孩子的参考。最后，我们调用本机方法this.target.remove（＆＃34; componentRef＆＃34中的子索引;）来删除组件。考虑到，componentRef有自己的孩子索引。

this.subscription = this.messageService.getMessage()
    .subscribe(message => this.removeChild(message))

removeChild(message){
    let component = this.idMap.get(message.id);
    let indice = this.target.indexOf(component);
    this.target.remove(indice);
    this.idMap.delete(message.id);
}

如果知道如何改进此解决方案在通信中写入。我觉得它可能会更好。感谢。

Angular 2.动态创建的组件如何自己调用destroy方法？

1 个答案: