Input @Output的Angular2 dynamiccomponentloader参数

据我所知，为刚刚使用DynamicComponentLoader添加到DOM中的组件设置@Input变量的方法是，在调用类似loadIntoLocation的内容后使用promise块：

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

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


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

我的问题是，在使用dynamiccomponentloader时，如何设置@Output

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");

---

我非常感谢您提供的帮助。

我将使用订阅方法，而不是链接到“自我更改（$event）功能的结果，如下所示：

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

由于删除了beta.16 loadIntoLocation，在我的示例中，我将使用loadNextToLocation，它接受ViewContainerRef

应用程序组件

从'angular2/core'导入{Component，DynamicComponentLoader，ViewChild，ViewContainerRef}；
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
你好{{name}
`,
指令：[]
})
导出类应用程序{
baz:string=“测试字符串”；
@ViewChild（'target'，{read:ViewContainerRef}）target:ViewContainerRef；
构造函数（专用dcl:DynamicComponentLoader）{
this.name='Angular2'
}
ngAfterViewInit（）{
this.dcl.loadNextToLocation（Lorem，this.target）
。然后（cmpRef=>{
cmpRef.instance.foo=this.baz；
cmpRef.instance.changer.subscribe（（$event）=>this.change（$event））；
});
}
更改（$事件）{
警报（$事件）；
}
}

Lorem组件

import{Component，Input，Output，EventEmitter}来自'angular2/core'；
@组成部分({
选择器：“lorem”，
模板：`
{{foo}}
跑`
})
洛雷姆类{
@Input（）foo:String；
@Output（）changer=neweventemitter（）；
运行（）{
this.changer.emit（“子事件”）；
}
}

看

---

希望对您有所帮助。

由

DynamicComponentLoader

添加的组件不支持

@Input（）

和

@Output（）

许多需要您帮助的组件-我的代码现在正在工作。在我结束这篇文章之前，我有两个问题：（1）如果baz是一个对象而不是一个字符串，那么它是否就是lorem访问的同一个对象（如果以后编辑过的话）？：cmpRef.instance.foo=this.baz；aka@Input（）foo:Object；（2） 它是每个父实例和每个子lorem之间的一个封闭的“通道”，父组件的其他实例化不能“侦听”吗？我担心我的应用程序中的消息太多，我更喜欢你的建议（如果关闭），而不是实现一个具有验证if条件的侦听器。订阅（args=>{if（args.id===this.localvar）{…回调…}）；1） 如果baz是一个对象并在以后进行编辑（即this.baz.property='test2'），则每个子对象都是相同的对象。如果在编辑baz对象后希望每个子对象都有不同的对象，则需要使用不可变参数（即cmpRef.instance.foo={this.baz.property}）2）每次从父对象调用loadNextToLocation为子组件的新实例启动新的“通道”。我想我们可以说这是一个封闭的渠道。但这听起来像是没有漂移的信号，这很酷-非常感谢你的帮助yurzui

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);
  }
}

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");
  }
}