angular 2 ElementRef in es5

Моя проблема заключается в том, что я пытаюсь сделать директиву атрибутов в угловом 2, что позволяет мне определять несколько атрибутов html по умолчанию из одного настраиваемого атрибута. Я пытаюсь использовать его специально для элемента ввода. проблема возникает из-за того, что я не могу получить ссылку на элемент, к которому прикреплен атрибут. Я знаю, что с помощью запроса просмотра вы можете получить ссылки на дочерние элементы (элементы, которые являются частью представления), но потому, что его директива атрибута у него нет представления, и мне нужен элемент, в котором находится директива. вот код, который у меня есть. обратите внимание, что все в es5 я не могу использовать машинописный или любой другой компилятор.angular 2 ElementRef in es5

родительский компонент и самозагрузки

$(document).ready(function(){ 
    ng.platform.browser.bootstrap(app.testing); 
}); 
(function(app){ 
    app.testing=ng.core.Component({ 
     selector:"testing", 
     //this is the element i need a reference to 
     //i would like to assign the min max and step properties using one attribute 
     template:"<input type='range' multiAttr='hello world' #input />", 
     directives:[app.multiAttr], 
    }).Class({ 
     constructor:[function(){}], 
    }); 
})(window.app||(window.app={}));

нескольких атрибутов директивы

(function(app){ 
    app.multiAttr=ng.core.Directive({ 
     selector:"[multiAttr]", 
     inputs:["multiAttr"], 
     queries:{"input":new ng.core.ElementRef()}, 
    }).Class({ 
     constructor:[function(){ 
     }], 
     ngAfterViewInit:function(){ 
      //here is where i need my element reference 
      console.log(this.input); 
      console.log(this.multiAttr); 
     } 
    }); 
})(window.app||(window.app={}));

HTML

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<testing></testing> 
<script src='../jquery.min.js'></script> 
<script src='../Rx.umd.min.js'></script> 
<script src='../angular2-polyfills.min.js'></script> 
<script src='../angular2-all.umd.js'></script> 
<script src='multiAttr.js'></script> 
<script src='testing.js'></script> 
</body> 
</html>

Я думаю, что ответ лежит где-то в ng.core.ElementRef, но я не могу выяснить, как правильно вставить его в мой скрипт.

источник

2016-02-24 Binvention

is 'this.viewChild' что-нибудь использовать? – dandavis

, если вы имеете в виду ng.core.ViewChild, который используется в обычном дочернем запросе, он не помогает, потому что его директива атрибута и, следовательно, не имеет представления или детей. – Binvention

'' "' –

Я думаю, что вы можете вводить ElementRef в вашей директиве:

var multiAttrDirective = ng.core.Directive({ 
    selector:"[multiAttr]", 
    inputs:["multiAttr"] 
}).Class({ 
    constructor:[ng.core.ElementRef, function(eltRef){ 
    console.log(eltRef); 
    console.log(eltRef.nativeElement); 
    }], 
    ngAfterViewInit:function(){ 
    (...) 
    } 
});

В eltRef.nativeElement возвращает элемент DOM, соответствующий вашему входу.

источник

2016-02-24 08:07:18

Как импортировать 'ElementRef' в ваш модуль? Через 'импорт'? –

angular 2 ElementRef in es5

ответ

Смежные вопросы