在Angular 2中注入动态指令/组件 [英] Injection of dynamic directive/component in Angular 2

问题描述

我是Angular 2的新手，以为我会进行扩展的主从流程以开始学习.

I'm new to Angular 2 and thought I'd make an extendable master-detail flow to start learning.

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

The 'master'-part is working, I can easily plugin the specific service I need to populate the list when bootstrapping the app. The problem lies in making the 'detail'-part extendable.

基本上，主从模板在模板中包含以下几行:

Basically, the master-detail template has the following lines in the template:

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

不，我可以加载Detail指令并完成该指令，但是我希望该指令/组件可以注入，因此我可以插入我喜欢的任何详细指令/组件，而无需将其硬编码为'master -detail'-component.

No, I could just load the Detail directive and be done with it, but I want that directive/component to be injectable so I could plugin whatever detail directive/component I like without hard-coding it into the 'master-detail'-component.

为了达到这个目的，我尝试了DynamicComponentLoader:

In order to achieve this I tried the DynamicComponentLoader:

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

还有master-detail.component.ts的构造函数:

And the constructor of master-detail.component.ts:

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

作为引导程序的一部分:

And as part of the bootstrap:

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

好消息是，此方法有效，它将加载SomeSpecificDetailComponent并在需要的位置显示模板.

The good news is that this works, it loads the SomeSpecificDetailComponent and shows the template where needed.

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

But now I'm stuck. Typescript is complaining, I cant seem to access the item passed down via <detail [item]='masterItemActive'> and I have no idea if this pattern is the way to go for finding a solution for this problem.

所以我的三个问题是:

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

Is the DynamicComponentLoader the way to go to solve this problem?

因为我宁愿provide()主从使用的指令.这似乎是最轻松的方法，但我不知道如何实现.

Because I would much rather provide() a directive which the master-detail uses. This seems the most painless approach but I have no idea how to achieve this.

如何访问SomeSpecificDetailComponent内部的item?

How can I access the item inside SomeSpecificDetailComponent?

我尝试过:

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

该如何防止打字稿抱怨?

因为dcl.loadAsRoot()的第一个参数需要为'Type'类型-并非如此.

Because the first argument of dcl.loadAsRoot() needs to be of type 'Type' - which it isn't.

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

任何帮助将不胜感激！

更新

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

I've been wrongly using Type as an interface, the typescript compilation error was fixed by using BaseDetailComponent extends Type.

推荐答案

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

Binding to dynamically injected components or directives is currently not supported.

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

What you can do is to pass the data imperatively to the created component

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

这篇关于在Angular 2中注入动态指令/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！