我正在修改 Angular Dart 教程中的代码以使用 Tooltip 类。我不想将工具提示的文本放在 Dart 文件中，而是将其放在 html 文件中。我试过了
dom.Element footnote;
footnote = querySelector("#fn1");
htext = footnote.innerhtml;
原码来自the angular dart website tutorial, chapter four.未更改的代码不会干净地构建，但它似乎不会影响它的操作。这是一个已知的错误，有一个 Unresolved 问题。
发布构建输出
[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".
工具提示.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
<!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>
回答
总结 Günter Zöchbauer 的回答，我进行了以下更改以使其正常工作:
footnote = dom.querySelector("#fn1");
String htext = footnote.innerHtml;
最佳答案
您有 import 'dart:html' as dom;这意味着 querySelector (没有限定符)无法找到，或者如果找到，则从另一个不合格的导入中使用。
和
footnode = dom.querySelector("#fn1");
// or
footnode = dom.document.querySelector("#fn1");
搜索整个文档，除了 shadow DOM 的内容。如果你也想搜索 shadow DOM，你可以使用
footnote = dom.document.querySelector("* /deep/ #fn1");
或者
footnote = dom.document.querySelector("* >>> #fn1");
第二个版本是最新的，但我不知道哪些浏览器或 polyfill 支持它。
关于dart - 如何在 Angular Dart 中检索innerhtml，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28978067/