在Angular2中传递组件

Question

假设我想变得非常抽象和模块化，并且我希望将组件作为输入传递给我的子组件。这是否可能？

我知道可以传递输入并在内部创建组件，但有时我想要传递不同/其他组件，否则我将不得不针对每个组件自定义代码，而我无法对操作进行抽象。

例如，假设我有一个名为P的父组件和一个名为C的子组件，我有一个特定的设计目的用于C，我希望将C作为可重复使用的组件，以便每当我想要使用元素实现此特定设计时都可以使用它。

现在，如果我想让C（两个单独的元素）包装两个不同的组件，我们称它们为A和B。 我希望P能够在创建它们后将它们传递给C，以保持设计的抽象性，同时能够将组件仅作为C内部的变量使用。

- Newbie

Answer 1

是的，这是可能的。实际上，这就是Angular2中模块化组件的组合方式。

例如，如果您有一个模态组件，并且想在整个应用程序中使用它，但该组件只是一个包装器，需要添加动态组件到其中。

这里是一个使用ComponentFactoryResolver的示例：

@Component({
  selector: 'my-dynamic-component',
  template: 'this is a dynamic injected component !'
})
export class MyDynamicComponent {}


@Component({ 
  selector: 'wrapper',
  template: `
  <div>
    <p>Wrapper Component</p>
    <template #dynamicComponent></template> 
  </div>
  `
})
export class WrapperComponent {
  @Input() contentComponent: any;
  @ViewChild('dynamicComponent', { read: ViewContainerRef })

  dynamicComponent: any;

  constructor(private componentResolver: ComponentFactoryResolver) {}

  ngAfterViewInit():void {
    const factory = this.componentResolver.resolveComponentFactory(this.contentComponent);

    this.dynamicComponent.createComponent(factory);
  }
}


@Component({
  selector: 'my-app',
  template: ` 
  <wrapper [contentComponent]="MyDynamicComponent"></wrapper>`
})
export class AppComponent {
    MyDynamicComponent: any = MyDynamicComponent;
}

受已弃用的ComponentResolver答案启发
另一种方法可以在这里找到答案

示例PLUNKER

- Tiberiu Popescu

---

在rc5-6中，使用ComponentFactoryResolve解析器来获取工厂。 - Valikhan Akhmedov

感谢您的解释！ - Newbie