在 Angular 中注入动态 directive/component 2

Question

我是 Angular 2 的新手，我想我会制作一个可扩展的主从流程来开始学习。

'master' 部分正在运行，我可以轻松地插入特定服务，我需要在 bootstrapping 应用程序时填充列表。问题在于使 'detail' 部分可扩展。

基本上，主从模板在模板中有以下几行：

<div class="large-10 columns">
    <detail [item]="masterItemActive" id="detail"></detail>
</div>

不，我可以只加载 Detail 指令并完成它，但我希望 directive/component 是可注入的，这样我就可以插入任何我喜欢的细节 directive/component 而无需将其硬编码到 'master-detail'-component.

为了实现这一点，我尝试了 DynamicComponentLoader:

dcl.loadAsRoot(detailComponent, '#detail', injector);

以及master-detail.component.ts的构造函数：

constructor(
    dcl:DynamicComponentLoader,
    injector: Injector,
    elementRef:ElementRef,
    detailComponent:BaseDetailComponent

并且作为 bootstrap 的一部分：

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

好消息是这有效，它加载 SomeSpecificDetailComponent 并在需要的地方显示模板。

但现在我卡住了。 Typescript 在抱怨，我似乎无法访问通过 <detail [item]='masterItemActive'> 传递下来的项目，我不知道这种模式是否是寻找解决此问题的方法。

所以我的三个问题是：

DynamicComponentLoader是解决这个问题的方法吗？

因为我更愿意provide() master-detail 使用的指令。这似乎是最轻松的方法，但我不知道如何实现。

如何访问 SomeSpecificDetailComponent 中的 item？

我试过了：

@Injectable()
export class SomeSpecificDetailComponent extends BaseDetailComponent {
    @Input()
    item:BaseMasterItem; // always empty (and yes, masterItemActive is being set )
}

我怎样才能防止打字稿抱怨？

因为 dcl.loadAsRoot() 的第一个参数需要是 'Type' 类型——但事实并非如此。

Argument of type 'BaseDetailComponent' is not assignable to parameter of type 'Type'

如有任何帮助，我们将不胜感激！

更新

我一直错误地使用 Type 作为接口，使用 BaseDetailComponent extends Type 修复了打字稿编译错误。

Answer 1

目前不支持绑定到动态注入的组件或指令。

你可以做的是将数据强制传递给创建的组件

dcl.loadAsRoot(detailComponent, '#detail', injector)
.then(componentRef => componentRef.instance.item = this.masterItemActive);

在 Angular 中注入动态 directive/component 2

Injection of dynamic directive/component in Angular 2

angular2-directives

angular2-di

angular