2017-05-14 51 views
0

我有不同类型的对象。不过,我想在我的一个Angular2组件中显示所有类型。 下面是我使用的代码:根据文件夹结构添加代码行 - 预编译器?

in for-loop: 
<div [ngSwitch]="Type"> 
    <c-test *ngSwitchCase="'Test'"></c-test> 
    <c-test2 *ngSwitchCase="'Test2'"></c-test2> 
    <etc> 
</div> 

随着时间的推移,我的应用程序可能会扩大,对象增加新的“类型”。由于我在不同的地方使用了上面的代码,所以我不想为每个添加的类型在所有这些地方添加一行。有没有办法使用类似于C++预编译器的东西来检查我的文件夹结构并相应地添加这些行?

例如:假设我有以下文件夹结构。

Objects 
|- TypeA 
|- TypeB 
|- etc 

在我的代码,我会再有这样的事情:

<div [ngSwitch]="Type"> 
    <precompile *ngFor="some looping through folders">  
     <"c-$FoundFolder" *ngSwitchCase="'$FoundFolder'"><"c-$FoundFolder"> 
    </precompile> 
</div> 

结果造成:

<div [ngSwitch]="Type"> 
    <c-TypeA *ngSwitchCase="'TypeA'"></c-TypeA> 
    <c-TypeB *ngSwitchCase="'TypeB'"></c-TypeB> 
    <etc *ngSwitchCase="'etc'"></c-etc> 
</div> 

我知道什么,我想以这种形式不存在,但有没有办法实现类似的东西,如果是的话,怎么样?

回答

1

以下方法不能完全按照您的要求工作。但是,基本的意图是在未来根据添加到应用程序中的新组件的情况动态加载新组件。有对角的网站一个很好的文章在此:

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

只是,它会保持相同的组件的新的声明,只是你需要在entryComponent为每个新组件的附加条目在同一个模块文件加入其中,新的组件声明:

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],

+0

非常感谢你,这似乎是非常接近我想做的事!我会尝试一下并评论它是如何发展的。 – user2065501

+0

这个方法有一个小问题。在文档中,他们使用一个函数返回所有可能的组件和他们的数据。但是,我想通过只知道名称来加载组件(或类似的东西)。基本上,以文档为例:代替'',其中广告已经加载,我想这样做:'',其中MyAdType是一个字符串或文件或用于通过add-banner加载组件的任何内容。那可能吗? – user2065501

+0

你可以请你创建一个示例plunker并解释我想要达到什么目的。可能那时我将能够帮助你。谢谢! – Lambo14