如何在 Angular2 Typescript 绑定中传递元素？答案

【问题标题】：How do you pass the element in Angular2 Typescript binding?如何在 Angular2 Typescript 绑定中传递元素？
【发布时间】：2017-02-05 02:07:09
【问题描述】：

如何获取通过绑定传递的特定 HTML dom 元素。对不起，如果这很难理解，这里是代码。

甜甜圈图.html

<div class="donut-chart" (donut)="$element"></div>

如何将 div 元素传递给 donut？

这是 TS

dount-chart.ts

@Component({
  selector: 'donut-chart',
  template: require('./donut-chart.html'),
  directives: [Widget, MorrisChart],
  encapsulation: ViewEncapsulation.None,
  styles: [require('./donut-chart.scss')]
})
export class DonutChart implements OnChanges{
  @Input() height: number = 300;
  @Input() data: any[] = [{label: 'loading', value: '0', color: '#eee'}];

  morris3Options: any;
  donut: any;

  render(): void {
    jQuery(this.donut).css({height: this.height}); // safari svg height fix
    window['Morris']['Donut']({element: this.donut}, this.morris3Options);
  }

我希望 donut 变量成为不使用 class/id 的元素。我需要使用多个甜甜圈和 jQuery，所以我需要一种方法来获得独特的甜甜圈。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

<div #someElement></div>
<div class="donut-chart" (donut)="someElement"></div>

也可以是当前元素

<div #someElement class="donut-chart" (donut)="someElement"></div>

【讨论】：

它必须是独一无二的。我将同时在屏幕上显示多个。
请更新您的问题并添加代码来演示您如何在屏幕上拥有多个。你想传递什么元素？您能否提供更多背景信息？也许还有其他方法可以完成您想要的。 donut 事件从何而来？
啊，我应该使用方括号吗？它有很多内容，但我只是想知道是否有一种方法可以通过使用 HTML 元素而不是 class/id 来传递您绑定到的元素。如果没有，我会另辟蹊径。
对不起，我不明白你评论的后面部分。如果donut 是@input() 而不是事件，那么您需要使用[donut]。如果你想要当前组件的元素，那么你可以注入它，但恕我直言，如果没有更多信息，它就没有多大意义。我看到了你的编辑，但它需要更多的上下文。 <div> 在哪里，donut:any 和 render() 方法在哪里？它们是如何相关的（相同的组件、不同的组件、兄弟姐妹、父子…）？