Question

我正在使用

角

我正在尝试做什么

我有一个清单。当我点击按钮时，我想将某些自定义属性附加到某个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忽略。只有在编译组件时，Angular才会处理像[phantomOp]="myItems" [myOper]="oper"这样的绑定。通常（使用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"

Answer 2

最近我遇到了类似情况。我想动态地添加和删除FileInput上的capture属性。现在，仅capture属性和文件输入的存在将落入捕获模式，因此将值设为null或''对我不起作用。

这就是我最终使它起作用的方式。我使用了@ViewChild和ElementRef。在您的情况下，它将类似于：

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

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

然后在TS

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
@ViewChild('yourContainer', {static:true}) yourContainer: ElementRef;

....

  addContainerAttributes(){
    // Not entirely sure what to put here
    this.yourContainer.nativeElement.setAttribute('phantomOp', myItems);
    this.yourContainer.nativeElement.setAttribute('myOper', oper);
  }

  // if you wish to completely remove the attribute dynamically
  removeContainerAttributes(){
    this.yourContainer.nativeElement.removeAttribute('phantomOp');
    this.yourContainer.nativeElement.removeAttribute('myOper');
  }
}

Angular - 是否可以在按钮点击

2 个答案: