如何将属性添加到 angular2 组件的父 dom 元素？

Question

我有以下内容：

...
<div class="container">
  <div class="fancy">
    <fancybutton></fancybutton>
  </div>
  <button (click)="addAttribute()">Remove</button>
  <button (click)="remAttribute()">Add</button>
</div>

... 我的问题是，我怎样才能使它在用户点击 "addAttribute()" 时将 "testattribute" 添加到组件的父 dom 元素，如下所示：

  <div class="fancy" testattribute="a">
    <fancybutton></fancybutton>
  </div>

这是我的花式按钮组件，下面是我在 home.component.html 中集成了花式按钮的父模板：

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

@Component({
  selector: 'home',  // <home></home>
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})

Answer 1

我有一个可能的解决方案（在撰写本文时未经测试）：

将参数的名称和值添加到addAttribute()调用中，如下所示：

addAttribute("testattribute", "a");

您还需要在通话开头添加 this.parentElement：

this.parentElement.addAttribute("testattribute", a");

让我知道此解决方案是否适合您。

Answer 2

<div class="container">
  <div class="fancy" [attr.testattribute]="isAttr">
    <fancybutton></fancybutton>
  </div>
  <button (click)="isAttr = true">Remove</button>
  <button (click)="isAttr = false">Add</button>
</div>

如何将属性添加到 angular2 组件的父 dom 元素？

How to add attributes to parent dom elements of component in angular2?

html

dom-manipulation

typescript

angular