Как повысить событие для кнопок, которые динамически создаются в DCL.loadintolocation()?

Question

Привет, я пытаюсь загрузить компонент с помощью DCL loadintolocation(). Компонент отлично загружается, но я хочу создать событие из создаваемых динамических кнопок. Я сделал демо здесь http://plnkr.co/edit/PFOFyd9XN5xMzwK9q0fP?p=preview> Я хочу поднять событие для с именем «destroy». Кто-нибудь, пожалуйста, помогите мне связать событие для кнопок, которые создаются динамически.

add(){ 
this.renderTemplate(` 
    <div id="evnt"> 
    <button (click)="raiseevent()">Destroy</button> 
    <some-component></some-component> 
    </div> 
`, [SomeComponent]); 

}

raiseevent(){ 
alert('hi'); 

}

Answer 1

В самом деле, raiseevent метод, который называется должен быть в компоненте динамически добавляется. В вашем случае это находится в компоненте, который его создает.

Если вы сделаете это, метод RaiseEvent называется:

function toComponent(template, directives) { 
    @Component({ 
    selector: 'fake-component', 
    template,directives 
    }) 

    class FakeComponent { 
    a:any; 
    dom:BrowserDomAdapter; 
    public fakeForm: ControlGroup; 
    public items: QueryList<SomeComponent>; 

    constructor(@ViewQuery(SomeComponent) 
      items:QueryList<SomeComponent>) { 
     this.items = items; 
    } 

    raiseevent(){ 
     alert('hi'); 
    } 
    } 
    return FakeComponent; 
} 

Если вы хотите, чтобы вызвать raiseevent метод из родительского компонента, вы можете реорганизовать FakeComponent, как описано ниже. Это показывает, как вводить этот родительский компонент и использовать его методы.

function toComponent(template, directives) { 
    @Component({ 
    selector: 'fake-component', 
    template,directives 
    }) 

    class FakeComponent { 
    a:any; 
    dom:BrowserDomAdapter; 
    public fakeForm: ControlGroup; 
    public items: QueryList<SomeComponent>; 

    constructor(@ViewQuery(SomeComponent) 
      items:QueryList<SomeComponent>, 
      private comp: AppComponent) { 
     this.items = items; 
    } 
    } 
    return FakeComponent; 
} 

Вот новое содержание шаблона:

add() { 
    this.renderTemplate(` 
    <div id="evnt"> 
     <button (click)="comp.raiseevent()">Destro</button> 
     <some-component></some-component> 
    </div> 
    `, [SomeComponent]); 
} 

Надеется, что это помогает вам, Thierry