Question

我的问题是我正在尝试在角度2中创建一个Attribute指令，它允许我从一个自定义属性定义多个默认html属性。我正试图在输入元素上专门使用它。问题出现在我似乎无法获得对属性所附加的元素的引用我知道使用视图查询可以获得对子元素的引用（属于视图的元素）但是因为它的属性指令它没有视图，我需要的元素是指令所在的元素。这是我到目前为止的代码。请注意，它全部在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中，但我无法弄清楚如何将其正确地注入我的脚本中。

Answer 1

我认为你可以在你的指令中注入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元素。

es5中的angular 2 ElementRef

1 个答案: