javascript - 处理 Angular 2 中动态创建的组件的 @Input 和 @Output

Question

如何为 Angular 2 中动态创建的组件处理/提供 @Input 和 @Output 属性？

想法是在调用 createSub 方法时动态创建(在本例中)SubComponent。 fork 很好，但我如何为 SubComponent 中的 @Input 属性提供数据。另外，如何处理/订阅 SubComponent 提供的 @Output 事件？

示例:(两个组件都在同一个 NgModule 中)

应用组件

@Component({
  selector: 'app-root'
})  
export class AppComponent {

  someData: 'asdfasf'

  constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }

  createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

  onClick() {
    // do something
  }
}

子组件

@Component({
  selector: 'app-sub'
})
export class SubComponent {
  @Input('data') someData: string;
  @Output('onClick') onClick = new EventEmitter();
}

Answer 1

您可以在创建组件时轻松绑定(bind)它:

createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.someData = { data: '123' }; // send data to input
    ref.onClick.subscribe( // subscribe to event emitter
      (event: any) => {
        console.log('click');
      }
    )
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

发送数据真的很简单，只需执行 ref.someData = data ，其中 data 是您要发送的数据。

从输出中获取数据也很容易，因为它是一个 EventEmitter，您只需订阅它，只要您 emit() a，您传入的 clojure 就会执行来自组件的值。