Question

我是Angular 2的新手，并且认为我会制作一个可扩展的主 - 细节流程来开始学习。

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

基本上，主 - 明细模板在模板中有以下几行：

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

不，我可以加载Detail指令并完成它，但我希望该指令/组件是可注入的，所以我可以插入我喜欢的任何细节指令/组件，而无需将其硬编码到“主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()一个master-detail使用的指令。这似乎是最无痛的方法，但我不知道如何实现这一目标。

如何访问item内的SomeSpecificDetailComponent？

我试过了：

@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 2中注入动态指令/组件

1 个答案: