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

问题描述

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

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

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

<detail [item]="masterItemActive" id="detail"></detail>

不，我可以只加载 Detail 指令并完成它，但我希望该指令/组件是可注入的，这样我就可以在没有硬编码的情况下插入我喜欢的任何细节指令/组件将其放入主从"组件中.

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

dcl.loadAsRoot(detailComponent, '#detail', 注入器);

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

构造函数(dcl:DynamicComponentLoader,注射器:注射器，elementRef:ElementRef,细节组件:基础细节组件

作为引导程序的一部分:

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

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

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

所以我的三个问题是:

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

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

如何访问SomeSpecificDetailComponent中的item?

我试过了:

@Injectable()导出类 SomeSpecificDetailComponent 扩展 BaseDetailComponent {@输入()item:BaseMasterItem;//始终为空(是的，正在设置 masterItemActive )}

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

因为 dcl.loadAsRoot() 的第一个参数需要是 'Type' 类型 - 它不是.

BaseDetailComponent"类型的参数不可分配给Type"类型的参数

任何帮助将不胜感激！

更新

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

解决方案

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

你可以做的是命令式地将数据传递给创建的组件

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

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>

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.

In order to achieve this I tried the DynamicComponentLoader:

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

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})

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

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.

So my three questions are:

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

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.

How can I access the item inside SomeSpecificDetailComponent?

I tried:

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

And how can I prevent typescript from complaining?

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'

Any help would be much appreciated!

Update

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 中注入动态指令/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！