如何在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

<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>

Answer 2

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

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

addAttribute("testattribute", "a");

您还需要将this.parentElement添加到调用的开头：

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

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