在Angular 2中使用模板变量以编程方式使用组件的DOM元素[重复]答案

【问题标题】：use programmatically DOM element of a Component using template variables in Angular 2 [duplicate]在Angular 2中使用模板变量以编程方式使用组件的DOM元素[重复]
【发布时间】：2016-04-07 13:00:51
【问题描述】：

我需要获取 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);
    }
}

【问题讨论】：

非常感谢您的建议

标签： angular angular2-template

【解决方案1】：

你可以使用AfterViewInit和ViewChild，这里是demo。

【讨论】：