Question

我创建了一个名为“color-item”的web组件，并通过在html中添加自定义元素标记来实例化它。我还给出了像这样的元素：

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item>
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

组件出现得很好并且表现得像预期的那样。但是，当我尝试访问这些元素（在主循环中）使用Dart代码对它们做一些有趣的事情时，我最终会遇到错误。以下是我尝试访问它们的方法：

    ColorItem color_Item1 = query("#colorItem1").xtag;
    ColorItem color_Item2 = query("#colorItem2").xtag;

这会产生以下错误：

    Breaking on exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.

我还试过像这样投射：

    ColorItem color_Item1 = query("#colorItem1").xtag(ColorItem);
    ColorItem color_Item2 = query("#colorItem2").xtag(ColorItem);

这会产生类似的错误：

    Exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.
    Breaking on exception: Class 'DivElement' has no instance method 'call'.

组件本身的定义如下：

   <!DOCTYPE html>
   <html>
   <body>
   <element name="color-item" constructor="ColorItem" extends="div">
   <template>

   <style scoped>

      .color-box{
          cursor:pointer;
          padding:20px;            
          margin:10px;
          margin-left:0px;
          display:inline-block;

          width:auto;
          height:auto;
          position: relative;
          font-size: 24px;
          color:white;
          background-color:orange;
          border-radius:24px;
          box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
          user-select: none;
         }

    </style>

    <div class="color-box" style="background-color:{{bg_color}}; color:{{text_color}}" on-click="swapColor()"> Color: <b>{{color_text}}</b> </div>
  </template>
  <script type="application/dart" src="ColorItem.dart"></script>
  </element>
  </body>
  </html>

，组件的脚本如下所示：

    import 'package:web_ui/web_ui.dart';

    class ColorItem extends WebComponent {
      @observable
      String color_text ="orange";

      @observable
      String bg_color ="orange";

      @observable
      String text_color ="white";

      @observable
      ColorItem next_color_item =null;




      List<String> colors = new List<String>()
       ..add("LimeGreen")
       ..add("green")
       ..add("yellow")
       ..add("OrangeRed")
       ..add("red")
       ..add("purple")
       ..add("blue");


     int i = 0;


     String getNextColor(){
       i++;
       i%=colors.length;
       return colors[i];
     }

    void swapColor(){
      String oldColor = bg_color;
      String nextColor = getNextColor();
      bg_color = nextColor;
      color_text = nextColor;
      if(next_color_item!=null){
        next_color_item.bg_color = oldColor;
      next_color_item.color_text = oldColor;
    }

    }
    }

有什么建议吗？

Answer 1

尝试替换;

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item>
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

与

<div is="x-color-item" id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></div>
<div is"x-color-item" id="colorItem2" color_text="green" bg_color="YellowGreen" ></div>

并替换

<element name="color-item" constructor="ColorItem" extends="div">

与

<element name="x-color-item" constructor="ColorItem" extends="div">

并尝试在main中使用如下代码;

var color_Item1 = query("#colorItem1").xtag;
  print(color_Item1.attributes);
  color_Item1.attributes.forEach((k,v){
    print('$k :: $v');
  });
var color_Item2 = query("#colorItem2").xtag;

Answer 2

问题是自定义元素尚未“升级”，因此xtag未正确设置。您看到的具体错误很奇怪，因为我希望xtag为空，而不是DivElement。

试试这个，看它是否有效：

Timer.run(() {
  ColorItem color_Item1 = query("#colorItem1").xtag;
  ColorItem color_Item2 = query("#colorItem2").xtag;
});

Answer 3

未经测试，但您可以尝试一下吗？

<color-item 
  on-load='onLoadHandler($event)'
/>

然后在主要部分，预见处理程序：

void onLoadHandler(Event event) {
    DivElement theDiv = event.currentTarget as DivElement;
    // then the xtag
    theDiv.xtag.doSomethingVeryFunky();
}

尝试在Dart中访问dom中的webcomponents实例时出现问题？

3 个答案: