dart - 在AngularDart中使用dart:html库

Question

我想知道如何(如果可能)在angulardart中使用dart:html。我在创建angulardart项目(待办事项列表)时在webstorm的默认示例中尝试使用它。

我尝试插入一些dart代码，但无效。仅当我将其插入OnInit自动实现的ngOnInit中时，它才起作用。那是唯一的方法吗？使用dart在AngularDart中管理DOM是正确的做法吗？
我需要AngularDart才能使用完整的功能路线系统

Answer 1

您可以通过多种方式获取AngularDart中的基础dart:html元素:

例如:

<div #myEl></div>
{{foo(myEl)}}

import 'dart:html';
@Component(...)
class ... {
  foo(DivElement div) {
    ...
  }
}

您还可以获取该div View ViewChild:

...
  @ViewChild('myEl')
  DivElement div;
...

您可以在组件的构造函数中要求它:

@Component(...)
class MyClass {
  DivElement div;
  MyClass(Element e) : div = e;
  ...

您可以实现“功能指令”，该功能指令根本没有类，而只需在创建组件时在组件上调用dart:html API:

@Directive(...)
void myFunctionalDirective(Element e) {
  ...
}

希望这些用例中的一个或多个可以满足您的需求。

请记住，每次使用dart:html库时，您可能会执行AngularDart无法跟踪的操作，并且可能会感到困惑。最好让angular为您提供尽可能多的功能，并且仅将dart:html用作某些小组件的“后端”，然后将angular连在一起。但这是一个非常大的主题，可以填补一本小书:)