如何使用打字稿Angular向html标签添加参数答案

【问题标题】：How to add parameters to html tag using typescript Angular如何使用打字稿Angular向html标签添加参数
【发布时间】：2019-12-15 11:09:36
【问题描述】：

我得到一个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);
}

【问题讨论】：

何时调用eventRender？

标签： html angular typescript tooltip element

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

【讨论】：

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

【讨论】：