我正在尝试设置一个标签系统,允许组件自己注册(带 Headers ) . 第一个选项卡就像一个收件箱,有很多动作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件 . 动作/链接来自JSON .
然后,实例化的组件将自己注册为新选项卡 .
我不确定这是否是“最佳”方法? Sofar我见过的唯一指南是静态标签,这没有帮助 .
到目前为止,我只有在主要引导程序中的标签服务在整个应用程序中持续存在,看起来像这样的东西 .
export interface ITab { title: string; }
@Injectable()
export class TabsService {
private tabs = new Set<ITab>();
addTab(title: string): ITab {
let tab: ITab = { title };
this.tabs.add(tab);
return tab;
}
removeTab(tab: ITab) {
this.tabs.delete(tab);
}
}
问题:
-
如何在收件箱中创建一个动态列表来创建新的(不同的)标签?我猜是否会使用
DynamicComponentBuilder
? -
如何从收件箱创建的组件(单击时)将自己注册为选项卡并显示?我猜
ng-content
,但我找不到有关如何使用它的更多信息
编辑:尝试澄清
将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目 . 单击其中一个项目后,将创建一个包含该项操作“类型”的新选项卡 . 那么类型就是一个组件
Edit2:图片
3 回答
update
Angular 5 StackBlitz example
update
ngComponentOutlet
已添加到4.0.0-beta.3update
有一个正在进行的
NgComponentOutlet
工作做了类似的事情https://github.com/angular/angular/pull/11235RC.7
Plunker example RC.7
用法示例
另见angular.io DYNAMIC COMPONENT LOADER
older versions xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
这在Angular2 RC.5中再次发生了变化
我将更新下面的示例,但这是休假前的最后一天 .
这个Plunker example演示了如何在RC.5中动态创建组件
Update - use ViewContainerRef.createComponent()
由于不推荐使用
DynamicComponentLoader
,因此需要再次更新该方法 .Plunker example RC.4
Plunker example beta.17
Update - use loadNextToLocation
Plunker example beta.17
original
从你的问题不完全确定你的要求是什么,但我认为这应该做你想要的 .
Tabs
组件获取传递的类型数组,并为数组中的每个项创建"tabs" .Plunker example beta.15(不是基于你的Plunker)
还有一种传递数据的方法可以传递给动态创建的组件,如(
someData
需要像type
一样传递)还有一些支持将依赖注入与共享服务一起使用 .
有关详细信息,请参阅https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
我的评论不够酷 . 我从接受的答案修复了关于rc2工作的plunker . 没有什么花哨的,与CDN的链接只是被打破了 .
https://plnkr.co/edit/kVJvI1vkzrLZJeRFsZuv?p=preview
有组件可以使用(rc5兼容)ng2-steps使用
Compiler
将组件注入步骤容器和服务,以便将所有内容连接在一起(数据同步)