Question

让我们说我想要非常抽象和模块化，我想将组件作为输入传递给我的子组件。

这可能吗？

我知道我可以传递输入并在内部创建组件，但有时我想传递不同的/组件，否则我将不得不自定义每个组件的代码，我不能抽象操作。

例如，假设我将组件P作为父组件，C组件作为子组件，我对C这样的设计有一定的目的，我希望将C作为可重用组件，以便每当我想实现这种特定设计时里面有元素。

现在，如果我想让C（两个独立的元素）环绕两个不同的组件，那就让它们称为A＆amp; B.我希望P能够在创建它们之后传递它们以保持设计抽象，同时能够将组件用作C中的变量。

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

受到deprecated ComponentResolver answer的启发另一种方法是answer HERE

Example PLUNKER

在Angular2

1 个答案: