Angular - 是否可以在单击按钮时动态添加属性

Question

我在用什么

• Angular

我想做什么

• 我有一个 list 。当我点击一个按钮时，我想将一些自定义属性附加到某个 HTML 元素

我有什么

• 我的 HTML 列表

• 连接到点击事件的按钮

我不确定该怎么做

• 当我单击按钮时，以下属性将添加到我的“容器”div 中:

[phantomOp]="myItems"[myOper]="oper"

HTML

<div class="container">
  <ul>
    <li> Albums </li>
    <li> Dates </li>
    </ul>
</div>

<button (click)="addContainerAttributes"> Add Container Attributes </button>

点击按钮后我希望 HTML 看起来像什么

<div class="container" [phantomOp]="myItems" [myOper]="oper">
  <ul>
    <li> Albums </li>
    <li> Dates </li>
  </ul>
</div>

TS

addContainerAttributes(){
  // Not entirely sure what to put here
}

Answer 1

添加在运行时动态添加的 Angular 特定标记将被 Angular 忽略。像 [phantomOp]="myItems"[myOper]="oper" 这样的绑定(bind)只有在编译组件时才会被 Angular 处理。通常(使用 AoT)这是在部署应用程序之前。

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?解释了如何在运行时编译一个组件。

你可以在你的组件中引入一个字段

isClicked:boolean = false;

将其静态添加到您的元素中

[phantomOp]="isClicked ? myItems : null" [myOper]="isClicked ? oper : null"

在点击处理程序中

(click)="isClicked=true"