angular - 路由到另一页时出现Angular + Dart JS错误

Question

我正在尝试开发一个简单的Dart + Angular2 Web应用程序。
我已经完成了Tour of Heroes教程，并且正在阅读有关Dart的文章。

我有一个我似乎无法理解的问题。

我正在尝试构建一个具有用户列表的简单应用，然后允许您选择一个用户并对其进行编辑。

我的项目中有3个dart文件，分别是app_component，user_list和user_edit:

这是我的 Dart 文件:

app_component.dart

@RouteConfig(const [
    const Route(path: '/users', name: 'UsersList', component: UserListComponent),
    const Route(path: '/user/:id', name: 'UserDetail', component: UserEditComponent)
])

@Component(
    selector: 'users',
    templateUrl: 'app_component.html',
    directives: const [ROUTER_DIRECTIVES],
    providers: const [UserService, ROUTER_PROVIDERS]
)
class AppComponent {}

user_list_component.dart

@Component(
    selector: 'user-list',
    templateUrl: 'user_list_component.html'
)
class UserListComponent implements OnInit {
    List<User> users;

    final UserService _userService;
    final Router _router;

    UserListComponent(this._userService, this._router);

    Future<Null> ngOnInit() async {
       users = await _userService.getUsers();
    }

    void gotoUser(User user) {
        _router.navigate(["UserDetail", {'id': user.userId.toString()}]);
    }
}

user_edit_component.dart

@Component(
    selector: 'user-detail',
    templateUrl: 'user_edit_component.html'
)
class UserEditComponent implements OnInit {
    @Input()
    User user;

    final UserService _userService;
    final RouteParams _routeParams;

    UserEditComponent(this._userService, this._routeParams);

    Future<Null> ngOnInit() async {
        var userId = _routeParams.get('id');
        if(userId != null) {
            user = await _userService.getUser(userId);
        }
    }
}

在user_list View 中，我将用户数据显示为表格，并且每行都有一个click事件，希望将其带到用户编辑页面。

user_list_component.html

...
<tbody>
    <tr *ngFor="let user of users" (click)="gotoUser(user)">
        <td>...</td>
    </tr>
</tbody>
...

在Dartium上运行此命令，可以得到预期的结果，并且我可以在用户列表和用户编辑页面之间导航，但是在其他所有浏览器上都失败，并且浏览器未提供任何错误信息。

这是我得到的错误

js_helper.dart:1729 Uncaught 
  wrapException @ js_helper.dart:1729
  call$0 @ async_patch.dart:561
  _microtaskLoop @ schedule_microtask.dart:41
  dart._startMicrotaskLoop @schedule_microtask.dart:50
  dart._AsyncRun__initializeScheduleImmediate_internalCallback.call$1 @async_patch.dart:54
  call$0 @ js_helper.dart:2409
  eval$1 @ isolate_helper.dart:462
  _callInIsolate @isolate_helper.dart:54
  dart.invokeClosure @ js_helper.dart:2409
  (anonymous function) @ js_helper.dart:2429

我正在尝试使用Dart学习Angular，并且我在这里可能做错了什么，但是我找不到答案，我非常感谢您的帮助:)

提前致谢。

编辑1:

pubspec.yaml

name: test_app
description: Test App
version: 0.0.1
environment:
  sdk: '>=1.13.0 <2.0.0'
dependencies:
  angular2: 2.0.0-beta.21
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
  platform_directives:
  - 'package:angular2/common.dart#COMMON_DIRECTIVES'
  platform_pipes:
  - 'package:angular2/common.dart#COMMON_PIPES'
  entry_points: web/main.dart
- dart_to_js_script_rewriter

编辑2:

user_edit_component.html

<div *ngIf="user != null">
    <label>User </label><span>{{user.userId}}</span>
    <label>Name: </label><span>{{user.fullName}}</span>
    <label>Domain: </label>
    <input [(ngModel)]="user.domain" placeholder="domain"/>
</div>

编辑3:

class User {
  String userId;
  String firstName;
  String lastName;
  String fullName;
  String email;
  String domain;
  List<String> roles;

  User(this.userId, this.domain);
}

Answer 1

NgModel是forms指令的一部分，而不是核心指令，因此，您似乎在FORM_DIRECTIVES组件的指令列表中缺少user_edit_component指令袋。

@Component(
    selector: 'user-detail',
    templateUrl: 'user_edit_component.html',
    directives: const [FORM_DIRECTIVES]
)

在Angular2 Dart中，您必须在模板中明确列出要使其可用的所有指令，除非您通过pubspec.yaml使它们全局可用。