帶Web組件的Dart庫佈局

我的程序工作正常，直到它變得有必要構建使用自定義Web組件的庫。我不明白Dart抱怨什麼。它給出了一個警告，說它「無法解析my_library」導致錯誤，「沒有這種類型的WebComponent」。我根據我的嘗試this。這裏是我的代碼：帶Web組件的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：

<!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（在同一個網絡輸入/輸出目錄）：

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：

<!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>

來源

2013-04-14 Phlox Midas

我嗅探了web/out文件夾中生成的Dart代碼，發現生成的fancyoption.dart文件聲明自己是一個庫。我回到我的非生成代碼，並將fancyoption.dart作爲自己的庫並從myapp.dart中導入。這使程序運行時沒有錯誤。不過，這是正確的嗎？每個Web組件都應該是自己的庫？ –

是的，沒錯。 Web組件是一個獨立的可重用組件，因此'fancyoption.dart'不應該是主應用的一部分。 –

我有同樣的問題。將main.dart聲明爲mylib的一部分。但是web/out/main.dart聲明'library mylib;'編譯器抱怨它應該是'mylib的一部分';'然後出現一堆錯誤。 – Y2i

正確的答案發布在評論中 - 轉發克里斯Buckett的答覆作爲答案爲未來的讀者的利益。

「Web組件是一個獨立的可重用組件，因此fancyoption.dart不應該是主應用程序的一部分。」

來源

2013-09-11 09:47:12 daftspaniel

帶Web組件的Dart庫佈局

回答

相關問題