Angular2 параметров dynamiccomponentloader для @output

Question

моего понимания, то, как вы установили @Input переменные для компонента, добавленного к DOM с DynamicComponentLoader, является то, что вы используете блок обещания после вызова что-то вроде loadIntoLocation:

this.dcl.loadIntoLocation(Lorem, this.elRef, 'target') 
      .then(cmpRef => { 

       cmpRef.instance.foo = _self.baz; 
      }); 


export class Lorem { 
    public @Input() foo : String; 
    ... 

Мои вопросы: как вы устанавливаете @Output при использовании dynamiccomponentloader?

this.dcl.loadIntoLocation(Lorem, this.elRef, 'target') 
      .then(cmpRef => { 

       cmpRef.instance.foo = _self.baz; 
       cmpRef.instance.changer = _self.change($event); 
      }); 



export class Lorem { 
    public @Input() foo   : String; 
      @Output() changer = new EventEmitter(); 
    ... 
    ... 
    this.changer.emit("event"); 

Я очень благодарен за помощь, которую вы могли бы предложить.

Answer 1

Я бы использовать подписаться метод вместо ссылки с результатом _self.change ($ событий) функции, как следующие:

cmpRef.instance.changer.subscribe(($event) => _self.change($event)); 

С beta.16 loadIntoLocation был удален, в моем примере я буду использовать loadNextToLocation Wich принимает ViewContainerRef.

App компонент

import {Component, DynamicComponentLoader, ViewChild, ViewContainerRef} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <div #target></div> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    baz: string = "Test string"; 
    @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; 
    constructor(private dcl: DynamicComponentLoader) { 
    this.name = 'Angular2' 
    } 
    ngAfterViewInit() { 
    this.dcl.loadNextToLocation(Lorem, this.target) 
     .then(cmpRef => { 
     cmpRef.instance.foo = this.baz; 
     cmpRef.instance.changer.subscribe(($event) => this.change($event)); 
     }); 
    } 
    change($event) { 
    alert($event); 
    } 
} 

Lorem компонент

import {Component, Input, Output, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'lorem', 
    template: ` 
    <div>{{foo}}</div> 
    <button (click)="run()">Run</button>` 
}) 
class Lorem { 
    @Input() foo: String; 
    @Output() changer = new EventEmitter(); 
    run() { 
    this.changer.emit("event from child"); 
    } 
} 

См plunker example

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