如何将这些代码放入 Angular2 组件

Posted 2023-02-23

【中文标题】如何将这些代码放入 Angular2 组件

【英文标题】：How to put these codes to Angular2 Component

【发布时间】：2016-10-20 15:00:19

【问题描述】：

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 代码相同的东西？

谢谢

【参考方案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":""
  ]

【讨论】：

谢谢。但是我不知道如何在Home中输出class="active"。还有如何输出  ?

在什么情况下您决定该项目是“活动的”？至于<li> </li>，在<li *ngFor="let arclink of arclinks">...</li><li> </li>后面加上即可。

当数组中有“class”:“active”时，应该输出class。当没有 URL 和描述时，该项目应类似于“ ”。非常感谢您的回复。