我正在尝试使用角度2进行大型项目，这样可以将任务交给网络工作人员。
我找到了针对JavaScript和TypeScript的ng2网络工作者的示例，但很难将这些转换为dart等效。
有人这样做过吗？或者知道怎么做？
下面是我当前的main.dart引导程序文件，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]);
}
答案 0 :(得分：2)
更新3
当项目从TypeScript拆分时，Web工作者支持已从Dart Angular2中删除。似乎有计划在DDC和Bazel可用时添加支持，并允许使用Chrome而不是Dartium进行开发。
更新2
中有一些基本的例子
但它们似乎过时了。
工作示例 - 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
- https://stackoverflow.com/a/36315210/217408）
<强> 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
网络/ 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>
网络/ 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"));
}
网络/ 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
<强>提示
我必须使用 Ctrl F5 才能使其正常工作，否则最新版本无法加载。
答案 1 :(得分：0)