използвайте програмно DOM елемент на компонент, използвайки променливи на шаблон в Angular 2

Трябва да получа обработка на конкретен DOM елемент, дефиниран в шаблона на Angular 2 компонент, така че да мога да работя с него в моя код. Не искам да използвам 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);
    }
}

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


Отговори (1)


Можете да използвате AfterViewInit и ViewChild, тук е демо.

person Eggy    schedule 04.01.2016