如何在angular2中为组件的父dom元素添加属性？答案

【问题标题】：How to add attributes to parent dom elements of component in angular2?如何在angular2中为组件的父dom元素添加属性？
【发布时间】：2017-03-06 08:12:38
【问题描述】：

我有以下几点：

...
<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'
})

【问题讨论】：

您可以使用 *ngIf 来隐藏测试按钮，然后将测试按钮设置为在您点击 addAtrribute 按钮时调用的函数。类似于显示/隐藏效果
这对我来说似乎是一个 XY 问题。为什么要在 div 中添加“testattribute”？你的最终目标是什么？花式按钮与问题有什么关系？
我有绝对定位的属性：顶部：40px，左侧：50px。我的目标是做到这一点，以便我可以单击 I 按钮来更改其中包含 fancybutton 但在 fancybutton 组件内部实现的容器的绝对位置。

标签： html angular typescript dom-manipulation

【解决方案1】：

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

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

addAttribute("testattribute", "a");

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

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

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

【讨论】：

组件内部对“this”的引用在哪里？ this.parentElement 未定义。
不起作用。不确定对“this”的引用来自哪里。

【解决方案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>

【讨论】：