ElementRef没有样式的实例

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没有样式实例。

Answer 1

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

Answer 2

正如Tobe O在他的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)