Question

更新：澄清我在下面的悲伤词汇......

给定一组JSON对象，一个“Level”组件和一个“Sprite”组件......

我坚持使用循环数组的语法并为每个JSON对象初始化一个新的“Sprite”，然后将“Sprite”添加到我的“Level”的模板（？）中。

这是我的“级别”模板。我可以对Sprite进行硬编码并且它可以正常工作（如图所示），但我正忙着找到添加任意数量Sprite的语法。

<div>
  <img src={ {imagePath}}/>
</div>
<div>
  <app-sprite></app-sprite>
</div>

我是一名难民Flex / Actionscript开发人员，正在学习Angular 2.我“得到”了很多 - 但后来我被卡住了。

我在这里的小练习：基于一些JSON（现在硬编码但后来来自服务）是用背景图像填充“Level”组件，然后创建并定位一些“精灵”在“水平”。

以下是现在的样子：

我创建了plunk我正在做的事情。我困惑的地方：

如何以“有角度”的方式动态创建自定义组件？我已经看到使用*ngFor创建li元素的教程，但我的“Sprite”组件的模板如下所示：

<div>
  <img class="spriteFloater" src={{imagePath}}/>
</div>`

如果我将“imagePath”硬编码为url，则上述工作正常 - 但如果我尝试使用“eventData.imagePath”（其中事件数据是JSON obj）则会失败。

我可以将对该模板的引用硬编码到我的“Level”（“app-sprite”标签）中并且它可以正常工作但是我在运行中生成“精灵”的尝试失败了。

此外，我正在尝试将数据传递给每个“Sprite”，然后在我的模板中使用它。我试过通过constructor但是这样做没有用，所以创建了一个自定义函数来做 - 当它输出正确的数据到控制台时，我创建的“精灵”不是那些注入DOM。

Geez ...对不起，这是一个如此愚蠢，冗长的帖子。

Answer 1

随着Günter的轻推，我能够想出这个。我不知道正确使用*ngFor的语法然后我必须弄清楚如何将传入的数据应用于新创建的精灵的样式。

猜猜我不再是~~堪萨斯州~~ Flex / Actionscript了。这个东西很疯狂......但我喜欢它（我想）。

<div>
  <app-sprite *ngFor="let event of eventList" [eventData]="event"
  ></app-sprite>
</div>

import { Component, OnInit, Input } from '@angular/core';
import {Eventdata} from './eventdata'

@Component({
  selector: 'app-sprite',
  template:`
     <div>
         <img class = "spriteFloater" [src]="eventData.imagePath"
                [style.left] = "eventData.x"
                [style.top] = "eventData.y"
                [style.background] = "eventData.id"/>
    </div>`,
  styles [`
    .spriteFloater {
      position: absolute;
      background: black;
      left: 50px;
      top:  80px;
    }
  `]
})
export class Sprite implements OnInit {
  @Input() eventData: Eventdata;
  setEventData(data:EventData){
  }

  constructor() {
  }

  ngOnInit() {

  }

}

Answer 2

我想你只需要使用

eventData?.imagePath

如果在ngOnInit()中初始化数据，这是在Angular首次尝试解析视图中的绑定之后。如果eventData为null，则imagePath的访问权限将被拒绝。仅在?.为imagePath时才eventData Angular访问!= null

组件的动态实例化？

2 个答案: