如何将这些代码放到Angular2组件中

Question

HTML代码：

  <ul class="arc">
    <li class="active"><a href="#">Home</a></li>
    <li class="important"><a href="#">URL1</a></li>
    <li><a href="#">URL2</a></li>
    <li class="other">&nbsp;</li>
  </ul>

Angular2代码：

​

    @Component({
      selector: 'arc-list',
      template: `
          <ul class="nav navbar-nav">
          	<li *ngFor="arclink of arclinks"><a href="{{arclink.url}}" title="{{arclink.title}}">
          	{{arclink.description}}</a>
          	</li>
          </ul>
      `
    })
    export class ArcList {
      arclinks = [
        {"url":"#", "description":"Home", "title":"TitleHome", "class":"active"}, 
        {"url":"#", "description":"URL1", "title":"Title1", "class":"important"}, 
        {"url":"#", "description":"URL2", "title":"Title2", "class":""},
        {"url":"", "description":"other", "title":"other", "class":"other"}
      ]
    }

​

如何编写组件代码，让组件生成与HTML 相同的内容

谢谢

Answer 1

确保将arclinks设置为组件的属性，并使用*ngFor="let arclink of arclinks" (注意let关键字)：

@Component({
  selector: 'arc-list',
  template: `
      <ul class="nav navbar-nav">
        <li *ngFor="let arclink of arclinks">
          <a href="{{arclink.url}}" title="{{arclink.title}}">{{arclink.description}}</a>
        </li>
      </ul>
  `
})
export class ArcList {
  arclinks = [
    {"url":"#", "description":"Link1", "title":"Title1", "class":"active"}, 
    {"url":"#", "description":"Link1", "title":"Title1", "class":""}, 
    {"url":"#", "description":"Link1", "title":"Title1", "class":""}
  ]
}