Question

我认为我缺乏对飞镖的基本理解，但基本上我想要做的是这样的事情：

void main() {
  new MyClass();
}

class MyClass {

  MyClass() {
    CanvasElement canvas = querySelector("#myCanvas");
    CanvasRenderingContext2D context = canvas.context2D;
  }
}

但是，当我尝试获取上下文时，canvas是一个空对象。我怎样才能在课堂上做到这一点。另外，我不想这样做：

void main() {
  CanvasElement canvas = querySelector("#myCanvas");
  new MyClass(canvas);
}

class MyClass {
  CanvasElement canvas
  MyClass(this.canvas) {
    canvas = this.canvas;
    CanvasRenderingContext2D context = canvas.context2D;
  }
}

因为我需要能够在课堂上完成这项工作。这不是飞镖的工作原理，还是我错过了什么？

Answer 1

你试过第二个例子吗？如果您从querySelector或在课堂内拨打main()，则无法发挥作用。

您使用Angular还是Polymer？ Angular或Polymer组件引入了shadowDOM。 querySelector()不会跨越shadowDOM边界，因此它不会在元素shadowDOM中找到元素。

要查询您查询组件的shadowDOM内的元素，然后您可以继续搜索。

querySelector("somecomponent").shadowRoot.querySelector("someothercomponent").shadowRoot.querySelector("#myCanvas");

您必须确保包含所有shadowDOM的DOM完全构建，然后才能查询它们。如果您在组件中运行代码，请将代码发布到onShadowRoot方法中（有关详细信息，请参阅NgComponent ready event）

如何在类中使用querySelector？

1 个答案: