Question

我有以下内容：

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

... 我的问题是，我怎样才能让用户点击＆＃34; addAttribute（）＆＃34;它添加了＆＃34; testattribute＆＃34;到这个组件的父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");

如果此解决方案适合您，请告诉我。

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

2 个答案: