программно использовать элемент DOM компонента с использованием переменных шаблона в Angular 2

Мне нужно получить дескриптор определенного элемента DOM, определенного в шаблоне компонента Angular 2, чтобы я мог работать с ним в своем коде. Я не хочу использовать 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);
    }
}

person Picci    schedule 03.01.2016    source источник
comment
большое спасибо за ваше предложение   -  person Picci    schedule 04.01.2016


Ответы (1)


Вы можете использовать AfterViewInit и ViewChild, вот демо.

person Eggy    schedule 04.01.2016