Question

我在Google Graphs组件中显示AngularDart但在AngularDart指令中没有显示问题。对于下面的代码，图表很好地显示在directive中，其中div节点已添加两个divs作为子项以包含图形和SVG。但对于compoenent，图表未显示，但在DOM中，相同的div显示为子项。有关如何调试此解决方案或解决方案的想法吗？

运行下面的代码会打印出来以控制Succesfully printed plot for Component graph和Succesfully printed plot for Directive graph。

展示它的最简单的代码是：

main.dart：

import 'dart:html' as dom;

import 'package:js/js.dart' as js;
import 'package:angular/angular.dart';

void printPlot(dom.Element element, String title) {
  var gviz = js.context.google.visualization;

  var gTableData = new js.Proxy(gviz.DataTable);
  gTableData.addColumn('number', 'Size');
  gTableData.addColumn('number', 'Counts');

  gTableData.addRow(js.array([1, 2]));
  gTableData.addRow(js.array([3, 4]));

  var options = js.map({
      'title': title
  });

  // Create and draw the visualization.
  var chart = new js.Proxy(gviz.ScatterChart, element);
  chart.draw(gTableData, options);
  print("Succesfully printed plot for $title");
}

@NgComponent(selector: '[my-component]')
class MyComponent {
  final dom.Element element;
  MyComponent(this.element) {
    js.context.google.load('visualization', '1', js.map({
        'packages': ['corechart'],
        'callback': (() => printPlot(element, 'Component graph'))
    }));
  }
}

@NgDirective(selector: '[my-directive]')
class MyDirective {
  final dom.Element element;
  MyDirective(this.element) {
    js.context.google.load('visualization', '1', js.map({
        'packages': ['corechart'],
        'callback': (() => printPlot(element, 'Directive graph'))
    }));
  }
}

@NgController(selector: '[controller]',
  publishAs: 'ctrl')
class Controller {
  Controller() {
  }
}

class DashboardModule extends Module {
  DashboardModule() {
    type(Controller);
    type(MyComponent);
    type(MyDirective);
  }
}

void main() {
  ngBootstrap(module: new DashboardModule());
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body controller>
<div my-component></div>
<div my-directive></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

Answer 1

这很可能是由于NgComponent引入了shadowDOM。当JavaScript库不支持shadowDOM（它可能没有）时，它只是找不到你的DOM元素，因此无法对它们采取行动。 AngularDart团队正在研究类似于NgComponent但没有shadowDOM的人（目前这是不可能的）。但这只是在实验状态（据我所知）并且没有可用的发布日期。

谷歌图表显示为NgDirective，但不是NgComponent

1 个答案: