路由到另一个页面时出现Angular + Dart JS错误

Question

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

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

我正在尝试构建一个包含用户列表的简单应用，然后您可以选择一个用户并对其进行编辑。

我的项目中有 3 个 dart 文件，app_component、user_list 和 user_edit：

这是我的飞镖文件：

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 视图中，我将用户数据显示为表格，并且我在每一行上都有一个点击事件，我希望将我带到用户编辑页面。

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 是表单指令的一部分，而不是核心，因此您似乎在 user_edit_component 组件的指令列表中缺少 FORM_DIRECTIVES 指令包。

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

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