dart - 如何在类中使用querySelector？

Question

我认为我对 Dart 缺乏基本的了解，但是基本上我想做的是这样的:

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;
  }
}

因为我需要能够从类里面完全做到这一点。这不是 Dart 的工作原理，还是我错过了一些东西？

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)。