使用Angular 2中的模板变量以编程方式使用组件的DOM元素

我需要获得Angular 2组件模板中定义的特定DOM元素的句柄，以便在代码中使用它。 我不想使用jQuery和ElementRef，而是希望使用一个可以在模板本身中定义的变量来引用我需要使用的元素。 我能够使用我在“我的组件”中插入的“内部组件”实现我的目标。我在“内部组件”中定义了一个输入属性，并将模板变量绑定到此属性；在我这样做之后，我可以在我的“内部组件”的代码中使用DOM元素。尽管有一种更简单的方法可以达到相同的结果，但我非常确信。有人能提供建议吗？ 下面是一个示例代码，它描述了我所做的工作。 提前谢谢

import {Component} from 'angular2/core';

import {MyInnerComponent} from './myInnerComponent';

@Component({
  selector: 'my-component',
  template: `
    <div #thisElement id="thisElement">
        <my-inner-component [element]="thisElement"></my-inner-component>
    </div>
  `,
  directives: [MyInnerComponent]
})

export class MyComponent { 

} 


import {Component, OnInit, Input} from 'angular2/core';

@Component({
  selector: 'my-inner-component',
  template: `
  `,
    inputs: ['element'],
})

export class MyInnerComponent implements OnInit { 
    @Input() element: any;

    ngOnInit() {
        console.log(this.element);
    }
}

从'angular2/core'导入{Component}；
从“./MyInnerComponent”导入{MyInnerComponent}；
@组成部分({
选择器：“我的组件”，
模板：`
`,
指令：[MyInnerComponent]
})
导出类MyComponent{
} 
从'angular2/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：“我的内部组件”，
模板：`
`,
输入：[“元素”]，
})
导出类MyInnerComponent实现OnInit{
@Input（）元素：任意；
恩戈尼尼特（）{
console.log（this.element）；
}
}

您可以使用，这是。

非常感谢您的建议