Dart库布局与Web组件 [英] Dart library layout with Web Component
问题描述
我的程序工作正常，直到需要构建使用自定义Web组件的库。我不明白Dart抱怨什么。它给出一个警告，说它无法解决my_library，这导致错误，没有这种类型WebComponent。我的尝试基于此。这是我的代码：
My program was working fine until it became necessary to build a library that used a custom web component. I can't understand what Dart is complaining about. It gives a warning saying it "cannot resolve my_library" which leads to the error, "No such type WebComponent". I based my attempt on this. Here's my code:
myapp.dart：
myapp.dart:
library my_library;
import 'dart:html';
import 'package:web_ui/web_ui.dart';
part 'fancyoption.dart';
void main() {
// Enable this to use Shadow DOM in the browser.
//useShadowDom = true;
}
myapp.html：
myapp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="myapp.css">
<link rel="components" href="fancyoption.html">
</head>
<body>
<h3>Type a color name into a fancy option textbox, push the button and
see what happens!</h3>
<div is="x-fancy-option" id="fancy-option1"></div>
<div is="x-fancy-option" id="fancy-option2"></div>
<div is="x-fancy-option" id="fancy-option3"></div>
<script type="application/dart" src="myapp.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
fancyoption.dart（在同一个web / out目录中）：
fancyoption.dart (in the same web/out directory):
part of my_library;
class FancyOptionComponent extends WebComponent {
ButtonElement _button;
TextInputElement _textInput;
FancyOptionComponent() {
}
void inserted() {
_button = this._root.query('.fancy-option-button');
_textInput = this._root.query('.fancy-option-text');
// make the background color of this web component the specified color
final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
_button.onClick.listen(changeColorFunc);
}
}
fancyoption.html：
fancyoption.html:
<!DOCTYPE html>
<html>
<body>
<element name="x-fancy-option" constructor="FancyOptionComponent" extends="div">
<template>
<div>
<button class='fancy-option-button'>Click me!</button>
<input class='fancy-option-text' type='text'>
</div>
</template>
<script type="application/dart" src="fancyoption.dart"></script>
</element>
</body>
</html>
推荐答案
正确的答案张贴在评论中 - reposting Chris
The correct answer was posted in a comment - reposting Chris Buckett's response as an Answer for the benefit of future readers.
web组件是一个独立的可重复使用的组件，因此fancyoption.dart不应该是主要应用程序。
"A web component is a stand-alone, reusable component, so fancyoption.dart shouldn't be part of the main app."
这篇关于Dart库布局与Web组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
