如何使用Typescript Angular向html标签添加参数

Question

我得到html的元素：

eventRender(info){
    console.log(info.el);
  }

这是输出：

而且我想添加以下属性：tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top"在html中看起来像这样

<button type="button" class="btn btn-default btn-secondary mb-2"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="top">
  Tooltip on top
</button>

如何使用此功能向html标签添加属性？

eventRender(info){
  console.log(info.el);
}

Answer 1

尝试这样：

。html

<button type="button" class="btn btn-default btn-secondary mb-2"
        [ngbTooltip]="info.tooltip"
        [placement]="info.placement">
  Tooltip on top
</button>

。ts

info = {
  tooltip : "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.",
  placement:"top"
}

Demo

Answer 2

您可以在角度中使用Renderer2来设置动态元素的属性：

constructor(private renderer: Renderer2) {}

  add() {
    this.renderer.setAttribute(this.test.nativeElement, 'tooltip', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.');
    this.renderer.setAttribute(this.test.nativeElement, 'placement' , 'top');
  }

示例html：

<button class="btn btn-primary" (click)="add()">Add</button>
<br>
<button #test type="button" class="btn btn-default btn-secondary mb-2">
  Tooltip on top
</button>

请参见Demo