Angular 2 Dart 中的网络工作者

Question

我正在为一个大型项目试验 angular 2，该项目将受益于将任务移交给网络工作者。

我找到了 JavaScript 和 TypeScript 的 ng2 web workers 示例，但很难将它们转换为 dart 等价物。

有人做过吗？或者知道怎么做？

下面是我当前的 main.dart bootstrap 文件，AppComponent 应该可以访问 UI，而 CustomerService 在 worker 中工作。

import 'package:angular2/platform/browser.dart';
import 'package:angular2/web_worker/ui.dart';

import 'package:ngMegatron/app_component.dart';
import 'package:ngMegatron/services/customer.dart';

main() {
  bootstrap(AppComponent, [CustomerService]);
}

Answer 1

更新 3

当项目从 TypeScript 拆分出来时，Dart Angular2 中删除了对 Web Worker 的支持。似乎有计划在 DDC 和 Bazel 可用时增加支持，并允许使用 Chrome 而不是 Dartium 进行开发。

更新 2

中有一些基本的例子

https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md#bootstrapping-a-webworker-application

但它们似乎已经过时了。

工作示例 - kitchen_sink

下面是来自 https://github.com/angular/angular/tree/master/modules/playground/src/web_workers/kitchen_sink 的示例代码，当构建 Angular 时，它已完成并从 TypeScript 转换为 Dart 的缺失部分（另请参阅
- https://github.com/angular/angular/blob/master/DEVELOPER.md - )

pubspec.yaml

name: kitchen_sink
environment:
  sdk: '>=1.10.0 <2.0.0'
dependencies:
  observe: '^0.13.1'
  angular2: '^2.0.0-beta.12'
  browser: '^0.10.0'
transformers:
- angular2/transform/codegen:
    platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
- angular2/transform/reflection_remover:
    $include:
        - web/background_index.dart
        - web/index.dart
- angular2/transform/deferred_rewriter:
    # No playground apps use deferred imports, but in general
    # all libraries with deferred imports should be included.
    $include: []

- $dart2js:
    minify: false
    commandLineOptions:
        - --show-package-warnings
        - --trust-type-annotations
        - --trust-primitives
        - --enable-experimental-mirrors

web/index.html

<html>
  <title>Hello Angular 2.0</title>
  <style>
    .sample-area {
      text-align: center;
      margin: 5px;
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
      border: 1px solid #d0d0d0;
   }
    .sample-area:focus {
      border: 1px solid blue;
      color: blue;
      font-weight: bold;
    }
  </style>
<body>
  <hello-app>
    Loading...
  </hello-app>

  <script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js" type="text/javascript"></script>
</body>
</html>

web/index.dart

library angular2.examples.web_workers.kitchen_sink.index;

import "package:angular2/platform/worker_render.dart";
import "package:angular2/core.dart" show AngularEntrypoint, platform;

@AngularEntrypoint()
main() {
  platform([WORKER_RENDER_PLATFORM])
      .asyncApplication(initIsolate("background_index.dart"));
}

web/index_common.dart

import 'package:angular2/core.dart'
    show Renderer, ElementRef, Component, Directive, Injectable;
import 'package:angular2/src/facade/lang.dart' show StringWrapper;
import 'dart:html' show KeyboardEvent;

// A service available to the Injector, used by the HelloCmp component.
@Injectable()
class GreetingService {
  String greeting = 'hello';
}

// Directives are light-weight. They don't allow new
// expression contexts (use @Component for those needs).
@Directive(selector: '[red]')
class RedDec {
  // ElementRef is always injectable and it wraps the element on which the
  // directive was found by the compiler.
  constructor(ElementRef el, Renderer renderer) {
    renderer.setElementStyle(el.nativeElement, 'color', 'red');
  }
  // constructor(renderer: Renderer) {}
}

// Angular 2.0 supports 2 basic types of directives:
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
// - Directive - add behavior to existing elements.

// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
// 2.0 component.
@Component(
    // The Selector prop tells Angular on which elements to instantiate this
    // class. The syntax supported is a basic subset of CSS selectors, for example
    // 'element', '[attr]', [attr=foo]', etc.
    selector: 'hello-app',
    // These are services that would be created if a class in the component's
    // template tries to inject them.
    viewProviders: const [GreetingService],
    // The template for the component.
    // Expressions in the template (like {{greeting}}) are evaluated in the
    // context of the HelloCmp class below.
    template:
        r'''<div class="greeting">{{greeting}} <span red>world</span>!</div>
           <button class="changeButton" (click)="changeGreeting()">change greeting</button>
           <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>''',
    // All directives used in the template need to be specified. This allows for
    // modularity (RedDec can only be used in this template)
    // and better tooling (the template can be invalidated if the attribute is
    // misspelled).
    directives: const [RedDec])
class HelloCmp {
  String greeting;
  String lastKey = '(none)';
  HelloCmp(GreetingService service) {
    this.greeting = service.greeting;
  }

  void changeGreeting() {
    greeting = 'howdy';
  }

  void onKeyDown(KeyboardEvent event) {
    lastKey = StringWrapper.fromCharCode(event.keyCode);
  }
}

我还将工作示例发布到 https://github.com/bwu-dart-playground/dart_playground/tree/master/angular2/web_workers/kitchen_sink

提示

我必须使用 CtrlF5 才能使其正常工作，否则无法加载最新版本。

Answer 2

来自 guenthers 答案的最后 link 似乎已损坏。在以下位置找到它：https://github.com/bwu-dart-playground/angular2/tree/master/web_workers/kitchen_sink

Angular 2 Dart 中的网络工作者

Web workers in Angular 2 Dart

dart

angular

angular2-services