Javascript Angular2-Can'；t删除所有/最近的子组件后添加子组件

我通过父组件中的按钮动态添加子组件。它工作得很好，我可以添加任意多的子项，但一旦我删除最后一个子项（刚刚添加），添加新的子项就不再有效

我是这样做的：

parent.ts

import {Component,DynamicComponentLoader,ElementRef,AfterViewInit,Injector} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ChildComponent} from './child.ts';


@Component({
    selector: 'app',
    host: {'id':'children'},
    template: `<button (click)="addChild()" >Add Child</button><div #here></div>`
})
class AppComponent implements AfterViewInit{
    public counter = 0;
    constructor(private _loader:DynamicComponentLoader,private _elementRef:ElementRef) {}
    addChild(){
        var app = this;
        this._loader.loadIntoLocation(ChildComponent,this._elementRef,'here').then(child => {
            child.instance.id = app.counter++;
        });
    }

}

bootstrap(AppComponent);

import {Component,OnInit} from 'angular2/core';

@Component({
    selector: "div",
    host: {'[attr.id]':'id'},
    template: "Child Component <button (click)='remove()' >Remove Me</button>"
})
export class ChildComponent implements OnInit{
    public id:number;

    remove(){
        $("#"+this.id).remove();
    }
};

从'angular2/core'导入{Component，DynamicComponentLoader，ElementRef，AfterViewInit，Injector}；
从'angular2/platform/browser'导入{bootstrap}；
从'/child.ts'导入{ChildComponent}；
@组成部分({
选择器：“应用程序”，
主机：{'id'：'children'}，
模板：`addchild`
})
类AppComponent实现AfterViewInit{
公共计数器=0；
构造函数（private _loader:DynamicComponentLoader，private _elementRef:elementRef）{}
addChild（）{
var-app=这个；
this.\u loader.loadintocation（ChildComponent，this.\u elementRef，'here'）。然后（child=>{
child.instance.id=app.counter++；
});
}
}
bootstrap（AppComponent）；

child.ts

import {Component,DynamicComponentLoader,ElementRef,AfterViewInit,Injector} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ChildComponent} from './child.ts';


@Component({
    selector: 'app',
    host: {'id':'children'},
    template: `<button (click)="addChild()" >Add Child</button><div #here></div>`
})
class AppComponent implements AfterViewInit{
    public counter = 0;
    constructor(private _loader:DynamicComponentLoader,private _elementRef:ElementRef) {}
    addChild(){
        var app = this;
        this._loader.loadIntoLocation(ChildComponent,this._elementRef,'here').then(child => {
            child.instance.id = app.counter++;
        });
    }

}

bootstrap(AppComponent);

import {Component,OnInit} from 'angular2/core';

@Component({
    selector: "div",
    host: {'[attr.id]':'id'},
    template: "Child Component <button (click)='remove()' >Remove Me</button>"
})
export class ChildComponent implements OnInit{
    public id:number;

    remove(){
        $("#"+this.id).remove();
    }
};

从'angular2/core'导入{Component，OnInit}；
@组成部分({
选择器：“div”，
主机：{'[attr.id]'：'id'}，
模板：“子组件删除我”
})
导出类ChildComponent实现OnInit{
公众id：号码；
删除（）{
$（“#”+this.id）.remove（）；
}
};

更新

.dispose（）

是自beta.16以来的

destroy（）

原创

我认为你应该使用

child.dispose();

而不是使用jQuery删除标记

---

另请参见更新

.dispose（）

是自beta.16以来的

destroy（）

原创

我认为你应该使用

child.dispose();

而不是使用jQuery删除标记

---

另请参见您可以使用

ComponentRef

类上的

dispose

方法删除组件

为此，您需要通过以下方式将其提供给组件实例本身：

addChild(){
    var app = this;
    this._loader.loadIntoLocation(ChildComponent,this._elementRef,'here').then(child => {
        child.instance.id = app.counter++;
        child.instance.ref = child;
    });
}

并在组件中像这样使用它：

@Component({
  selector: "div",
  host: {'[attr.id]':'id'},
  template: "Child Component <button (click)='remove()' >Remove Me</button>"
})
export class ChildComponent implements OnInit{
  public id:number;

  remove(){
    this.ref.dispose();
  }
};

@组件({
选择器：“div”，
主机：{'[attr.id]'：'id'}，
模板：“子组件删除我”
})
导出类ChildComponent实现OnInit{
公众id：号码；
删除（）{
此.ref.dispose（）；
}
};

您可以使用

ComponentRef

类上的

dispose

方法删除组件

为此，您需要通过以下方式将其提供给组件实例本身：

addChild(){
    var app = this;
    this._loader.loadIntoLocation(ChildComponent,this._elementRef,'here').then(child => {
        child.instance.id = app.counter++;
        child.instance.ref = child;
    });
}

并在组件中像这样使用它：

@Component({
  selector: "div",
  host: {'[attr.id]':'id'},
  template: "Child Component <button (click)='remove()' >Remove Me</button>"
})
export class ChildComponent implements OnInit{
  public id:number;

  remove(){
    this.ref.dispose();
  }
};

@组件({
选择器：“div”，
主机：{'[attr.id]'：'id'}，
模板：“子组件删除我”
})
导出类ChildComponent实现OnInit{
公众id：号码；
删除（）{
此.ref.dispose（）；
}
};

您能在plnkr上预制作吗？你能在plnkr上预制作吗？