2

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

“主”部分正在工作，我可以轻松地插入我需要在引导应用程序时填充列表的特定服务。问题在于使“细节”部分可扩展。

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

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

不，我可以只加载Detail指令并完成它，但我希望该指令/组件是可注入的，因此我可以插入我喜欢的任何详细指令/组件，而无需将其硬编码到“主细节”组件中。

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

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

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

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

作为引导程序的一部分：

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

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

但现在我被困住了。打字稿在抱怨，我似乎无法访问通过传递的项目<detail [item]='masterItemActive'>，我不知道这种模式是否是为这个问题寻找解决方案的方法。

所以我的三个问题是：

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

因为我更喜欢provide()主从使用的指令。这似乎是最轻松的方法，但我不知道如何实现这一点。

我怎样才能进入item里面SomeSpecificDetailComponent？

我试过了：

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

以及如何防止打字稿抱怨？

因为第一个参数dcl.loadAsRoot()需要是“类型”类型 - 它不是。

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

任何帮助将非常感激！

更新

我一直错误地Type用作接口，打字稿编译错误已通过使用BaseDetailComponent extends Type.

4

1 回答 1

1

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

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

dcl.loadAsRoot(detailComponent, '#detail', injector)
.then(componentRef => componentRef.instance.item = this.masterItemActive);
于 2016-02-27T15:09:45.350 回答