我的问题是我试图在 angular 2 中创建一个 Attribute 指令，它允许我从一个自定义属性定义多个默认 html 属性。我正在尝试专门在输入元素上使用它。问题在于我似乎无法获得对属性所附加元素的引用我知道使用 View 查询可以获得对子元素(作为 View 一部分的元素)的引用，但因为它是一个属性指令它没有 View ，我需要的元素是指令所在的元素。这是我到目前为止的代码。请注意，这一切都在 es5 中，我无法使用 typescript 或任何其他编译器。
父组件和 bootstrap
$(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 的某个地方，但我不知道如何将它正确地注入(inject)到我的脚本中。
最佳答案
我认为您可以在指令中注入(inject) 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 元素。关于javascript - es5 中的 Angular 2 ElementRef，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35591611/