웹 구성 요소가있는 다트 라이브러리 레이아웃

사용자 지정 웹 구성 요소를 사용하는 라이브러리를 빌드해야 할 때까지 내 프로그램이 제대로 작동했습니다. 다트가 불평하는 내용을 이해할 수 없습니다. "no_the type WebComponent"오류로 연결되는 "my_library"를 해결할 수 없다는 경고를 표시합니다. 내 시도는 this에 근거합니다.웹 구성 요소가있는 다트 라이브러리 레이아웃

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

웹/아웃 폴더에서 생성 된 다트 코드를 스니핑하여 생성 된 fancyoption.dart 파일이 라이브러리로 선언되었음을 확인했습니다. 나는 생성되지 않은 코드로 돌아가서 fancyoption.dart를 자체 라이브러리로 만들고 myapp.dart에서 가져 왔습니다. 이로 인해 프로그램을 오류없이 실행할 수있었습니다. 그래,이게 맞습니까? 모든 웹 구성 요소는 자체 라이브러리 여야합니다. –

네, 맞습니다. 웹 컴포넌트는 재사용 할 수있는 독립형 컴포넌트이므로 'fancyoption.dart'는 메인 애플리케이션의 일부가되어서는 안됩니다. –

나는 동일한 문제가있다. mylib의 일환으로 main.dart를 선언했습니다. 그러나 web/out/main.dart는 'library mylib; 컴파일러는 'mylib의 일부'라고 불평한다. 그리고 나서 많은 오류가 발생합니다. – Y2i

정답은 코멘트에 게시되었습니다. Chris Buckett의 답변은 미래의 독자를위한 답으로 재 게시되었습니다.

"웹 구성 요소는 재사용이 가능한 독립 실행 형 구성 요소이므로 fancyoption.dart가 기본 응용 프로그램의 일부가 아니어야합니다."

출처

2013-09-11 09:47:12 daftspaniel

웹 구성 요소가있는 다트 라이브러리 레이아웃

답변

관련 문제