ElementRef没有style的实例

Question

我正在编写一些代码，这些代码将使用dart更新div的位置。

所以，我想出的方法是，在div上按下鼠标，开始更新元素的位置。

html如下所示：

<div (mousedown)="mouseDownFunction($event)"></div>
<div #selection></div>

省道看起来像：

@ViewChild("selection")
DivElement selectionDiv;

mouseDownFunction(mouse){
  selectionDiv.style.left = "${mouse.position.left}px";
}

当发生这种情况时，它会尝试在selectionDiv上调用style，但表示ElementRef没有style的实例。

​

​

Answer 1

这是预期的功能。selectionDiv不是DivElement，而是ElementRef。要获取dart:html元素，请使用getter selectionDiv.nativeElement。希望这能有所帮助。

Answer 2

正如Tobe在他的answer中建议的那样，问题是selectionDiv是ElementRef而不是DivElement。

但我想补充的是，启用checked mode可以帮助您在将来更早地捕获此类错误。默认情况下，Dartium不执行类型检查。如果你想从你的类型注解中获益，你需要在启动Dartium时使用specify the --checked VM flag。

在Linux上，您可以执行以下操作来启用检查模式：

DART_FLAGS='--checked' path/to/dartium

您的代码现在应该会生成以下错误消息：

ORIGINAL EXCEPTION: type 'ElementRef' is not a subtype of type 
'DivElement' of 'value' where
  ElementRef is from package:angular2/src/core/linker/element_ref.dart
  DivElement is from dart:html

上面的错误消息提供的堆栈跟踪可以告诉您是哪个变量导致了错误。

ORIGINAL STACKTRACE:
#0      MyComponent.selectionDiv= (package:my_package/my_component.dart:15:14)