如何在类中使用 querySelector？

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

您是否尝试过第二个示例？如果您从 main() 或在班级内调用 querySelector 并没有什么不同。

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

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

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

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