时间戳

首页 > 解决方案 > 在 AngularDart 中使用 dart:html 库

dart - 在 AngularDart 中使用 dart:html 库

问题描述

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

我尝试插入一些飞镖代码，但它不起作用。只有当我将它插入到 OnInit 自动实现的 ngOnInit 中时它才有效。这是唯一的方法吗？在 AngularDart 中使用 dart 管理 DOM 是正确的做法吗？我需要 AngularDart 来实现全功能的路线系统

标签： dartangular-dartdart-html

解决方案

您可以通过多种方式获取 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 将它们连接在一起。但这是一个非常大的话题，可以写一本小书:)

推荐阅读