Question

我是一个有角度的新手，目前正在建立一个angular2应用程序。

我想要做的是从以下对象数据生成一系列DOM组件：

// Class construct with alphabeticalized properties
export class Screens {
    screens: Array<Object>;
}


export var screenData: Screens = {
    // Lists all of the audio files in the course 
    screens: [
        {
            id: 0,
            template: 'templateURL-0.html',
            css: 'templateURL-0.css'
        },
        {
            id: 1,
            template: 'templateURL-1.html',
            css: 'templateURL-1.css'
        },
        {
            id: 2,
            template: 'templateURL-0.html',
            css: 'templateURL-0.css'
        }
    ]
};

我希望最终结果类似于以下内容，其中模板0将显示两次，模板1将显示一次;按顺序：

<app-screen></app-screen> <!--  templateURL-0.html content  -->
<app-screen></app-screen> <!--  templateURL-1.html content  -->
<app-screen></app-screen> <!--  templateURL-0.html content  -->

我阅读了Structural Directives上的教程，我认为我需要按照这些方式实施一些内容，但是老实说我对最佳方法感到有些失落。

理想情况下，我希望有类似的内容：

<app-screen *ngFor="let screen of screenData.screens"></app-screen>

然后以某种方式设置模板URL取决于screenData.screens.template是什么。

或者我应该做这样的事情？ （不确定语法是否正确）

<div *ngFor="let screen of screenData.screens" [ngSwitch]="screenData.screens.template">
  <app-screen-template1 [ngSwitchCase]="'templateURL-0.html'"></app-screen-template1>
  <app-screen-template2 [ngSwitchCase]="'templateURL-1.html'">Ready</app-screen-template2>
</div>

注意：我永远不会更改templateURL参考。

Answer 1

我发现实现此目标的最佳方法是使用内置的x实现路由。

所以最后我在我的课程中有以下内容，其中template属性是url path / url segment。

RouterModule

然后当我想加载/实例化这个模板时，我所要做的就是使用类似的东西导航到这个URL：

// Class construct with alphabeticalized properties export class Screens { screens: Array<Object>; } export var screenData: Screens = { // Lists all of the audio files in the course screens: [ { id: 0, template: 'template/template-0' } ] };

其中 <button [routerLink]="[screen.template]"></button>是screen中的绑定变量。

有关路由和导航的更多信息here。

组件模板

1 个答案: