在AngularDart中使用dart：html库

Question

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

我尝试插入一些飞镖代码，但是它不起作用。仅当我将其插入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视图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连接起来。但这是一个非常大的主题，可以填补一本小书：）