Question

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

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

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

原始代码来自the angular dart website tutorial, chapter four.未更改的代码不能完全构建，但它似乎不会影响它的操作。这是一个已知存在问题的已知错误。

pub build output

[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ünterZöchbauer的答案，我做了以下修改才能让它发挥作用：

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

Answer 1

您拥有import 'dart:html' as dom;，这意味着无法找到querySelector（没有限定符），或者如果找到，则会从其他非限定导入中使用{
1}}。随着

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

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

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

或

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

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

如何在Angular Dart中检索innerhtml

pub build output

tooltip.dart

的index.html

答案

1 个答案: