Question

我正在尝试开发一个简单的Dart + Angular2 Web应用程序。我已经完成了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是表单指令的一部分而不是核心，因此您似乎错过了FORM_DIRECTIVES组件的指令列表中的user_edit_component指令包。

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

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

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

1 个答案: