我需要处理在 Angular 2 组件的模板中定义的特定 DOM 元素,以便我可以在我的代码中使用它。我不想使用 jQuery 和 ElementRef,而是使用可以在模板本身中定义的变量来引用我需要使用的元素。我可以使用插入“我的组件”中的“内部组件”来实现我的目标。我在“内部组件”中定义了一个 Input 属性,并将模板变量绑定到该属性;这样做之后,我可以在“内部组件”的代码中使用 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);
}
}