在Angular 2中注入动态指令/组件

我是Angular 2的新手，我想我应该制作一个可扩展的主细节流程来开始学习

“主”部分正在工作，我可以很容易地插入特定的服务，以便在启动应用程序时填充列表。问题在于使“细节”部分可扩展

基本上，“主详细信息”模板中有以下行：

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

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

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

作为引导的一部分：

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

好消息是，这是可行的，它加载

SomeSpecificDetailComponent

，并在需要的地方显示模板

但现在我被卡住了。Typescript正在抱怨，我似乎无法访问通过

传递下来的项目，我不知道这种模式是否是解决此问题的方法

所以我的三个问题是：

DynamicComponentLoader是解决此问题的方法吗？

因为我更愿意

提供（）

主细节使用的指令。这似乎是最无痛的方法，但我不知道如何做到这一点

如何访问

SomeSpecificDetailComponent

中的

项目

？

我试过：

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

我如何防止typescript抱怨？

因为

dcl.loadAsRoot（）

的第一个参数必须是“type”类型，而不是

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

任何帮助都将不胜感激

更新

---

我错误地使用了

Type

作为接口，使用

BaseDetailComponent扩展Type

修复了typescript编译错误

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

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

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

---

很好，谢谢！遗憾的是，它不受支持，这种方法感觉有点粗糙。你知道他们是否打算支持它吗？我不知道。我没有看到任何赞成或反对它的评论。每个人都想要它。这有古特胡布问题吗？@AlexanderAbakumov，我想是的。

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