如何在 Angular Dart 中检索 innerhtml

Question

我正在修改 Angular Dart 教程中的代码以使用工具提示 class。我不想将工具提示的文本放在 Dart 文件中，而是想将它放在 html 文件中。我试过了

dom.Element footnote;
footnote = querySelector("#fn1");
htext = footnote.innerhtml;

此代码在工具提示中 class。我在最后两行收到警告，Dart 没有运行也没有抛出错误。如何从 html 主文件（即不是从组件 html 文件）中检索 HTML？

原始代码来自the angular dart website tutorial, chapter four. 未更改的代码构建不干净，但似乎不影响其运行。这是一个已知错误，有一个未解决的问题。

pub 构建输出

[Info from Dart2JS]:
Compiling tutorial|web/main.dart... 
[Dart2JS on tutorial|web/main.dart]:
1 warning(s) suppressed in package:tutorial.
[Info from Dart2JS]:
Took 0:00:11.779928 to compile tutorial|web/main.dart.
Built 182 files to "build".

此输出的最后一行已被注释掉

tooltip.dart

library tooltip;

import 'dart:html' as dom;
import 'package:angular/angular.dart';
@Decorator(selector: '[tooltip]')

class Tooltip
{
  final dom.Element element;

  @NgOneWay('tooltip')
  TooltipModel displayModel;

  dom.Element tooltipElem;
  dom.Element footnote;

  Tooltip(this.element)
  {
    element..onMouseEnter.listen((_) => _createTemplate())
           ..onMouseLeave.listen((_) => _destroyTemplate());
  }

  void _createTemplate()
  {
    assert(displayModel != null);

tooltipElem = new dom.DivElement();


    footnote = querySelector("#fn1");
    htext = footnote.innerhtml;


    if (displayModel.text != null)
    {
      dom.DivElement textSpan = new dom.DivElement()
          ..appendHtml(displayModel.text)
          ..style.color = "white"
          ..style.fontSize = "smaller"
          ..style.paddingBottom = "5px";

      tooltipElem.append(textSpan);
    }

    tooltipElem.style
        ..padding = "5px"
        ..paddingBottom = "0px"
        ..backgroundColor = "black"
        ..borderRadius = "5px"
        ..width = "${displayModel.imgWidth.toString()}px";

    // position the tooltip.
    var elTopRight = element.offset.topRight;

    tooltipElem.style
        ..position = "absolute"
    ..top = "${elTopRight.y}px"
    ..left = "${elTopRight.x + 10}px";

    // Add the tooltip to the document body. We add it here because we need to position it
    // absolutely, without reference to its parent element.
    dom.document.body.append(tooltipElem);
  }

   void _destroyTemplate()
  {
    tooltipElem.remove();
  }
}

class TooltipModel
{
  final String text;
  final int imgWidth;

  TooltipModel(this.text, this.imgWidth);
}

如您所见，我还没有使用 html。我正在努力让它一步一个脚印地工作。

index.html

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Chapter Four - A Simple Recipe Book</title>
    <link rel="stylesheet" href="style.css">

    <script src="packages/web_components/webcomponents.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
  <recipe-book></recipe-book>

  <div id="fn1">
    <h2>Citation</h2>
    <p>source specification</p>
    <p>additional information</p>
  </div>

  <script type="application/dart" src="main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

我添加了 ID 为 fn1 的 div。

回答

为了总结 Günter Zöchbauer 的回答，我进行了以下更改以使其正常工作：

footnote = dom.querySelector("#fn1");
String htext = footnote.innerHtml;

Answer 1

您有 import 'dart:html' as dom;，这意味着 querySelector（没有限定符）无法找到，或者如果找到则从另一个不合格的导入中使用。
随着

footnode = dom.querySelector("#fn1");
// or 
footnode = dom.document.querySelector("#fn1");

搜索整个文档，除了影子 DOM 的内容。如果你也想搜索影子 DOM，你可以使用

footnote = dom.document.querySelector("* /deep/ #fn1");

或

footnote = dom.document.querySelector("* >>> #fn1");

第二个版本是最新的，但我还不知道哪些浏览器或 polyfills 支持它。

如何在 Angular Dart 中检索 innerhtml

How to Retrieve innerhtml in Angular Dart

innerhtml

dart

angular-dart

pub 构建输出

tooltip.dart

index.html

回答