Question

我需要处理Angular 2 Component模板中定义的特定DOM元素，以便我可以在代码中使用它。我不想使用jQuery和ElementRef，而是可以在模板本身中定义的变量来引用我需要使用的元素。我能够使用＆＃34;内部组件＆＃34;来实现我的目标。我插入＆＃34;我的组件＆＃34;。我在＆＃34;内部组件＆＃34;中定义了一个Input属性。并将模板变量绑定到此属性;在我这样做之后，我可以在我的＆＃34;内部组件的代码中使用DOM元素＆＃34;。我很确定有一种更简单的方法可以达到相同的结果。有人可以提供建议吗？这里有一个示例代码，描述了我的工作。提前致谢

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);
    }
}

Answer 1

您可以使用AfterViewInit和ViewChild，此处为demo。

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

1 个答案: