自版本 alpha 34 以来，Angular 2 路由器损坏答案

【问题标题】：Angular 2 Router broken since version alpha 34自版本 alpha 34 以来，Angular 2 路由器损坏
【发布时间】：2015-11-01 14:24:54
【问题描述】：

我玩 Angular2 已经有一段时间了。所有代码都是最前沿的，并使用最新的 TypeScript Nightly 1.6 和 Angular alpha 34。我无法从其中一个组件调用父路由器。如果可能，请帮助我。在此我附上代码和导航尝试的错误。

app.ts

/// <reference path="../typings/angular2/angular2.d.ts" />
'use strict';
import {Component, View, bootstrap} from 'angular2/angular2';
import {routerInjectables, RouterOutlet, RouteConfig} from 'angular2/router';
import {LoginApp} from './login/login';
import {DashboardApp} from './dashboard/dashboard';
// Annotation section
@Component({
    selector: 'inventman-app'
})
@View({
    template: `<!-- The router-outlet displays the template for the current component based on the URL -->
    <router-outlet></router-outlet>`,
    directives: [RouterOutlet]
})
@RouteConfig([
    { path: '/', redirectTo: '/login' },
    { path: '/dashboard', as: 'dashboard', component: DashboardApp },
    { path: '/login', as: 'login', component: LoginApp }
])
// Component controller
export class InventmanApp {
    constructor() {
    }
}

// bootstrap the Main App
bootstrap(InventmanApp,
    [
        routerInjectables
    ]);

/// <reference path="../../typings/angular2/angular2.d.ts" />
'use strict';
import {Component, View, formDirectives} from 'angular2/angular2';
import {Router} from 'angular2/router';
import {HttpService} from '../../services/httpservice/httpservice';
@Component({
    selector: 'login-app'
})
@View({
    templateUrl: './jsts/components/login/login.html',
    directives: [formDirectives],
    styleUrls: ['./jsts/components/login/login.css']
})
export class LoginApp {
    username: String;
    password: String;
    constructor(public router: Router) {
    }
    onSubmit() {
        const username = this.username, password = this.password;
        HttpService.serve('https://' + location.host + '/userapi/sessions/create', 'POST', {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, JSON.stringify({ username, password }))
            .then(response=> {
                if (!response.id_token) {
                    // Alerts the actual message received from the server
                    alert(response.message);
                    // Removes any previous assigned JWT to ensure tighter security
                    localStorage.removeItem('jwt');
                }
                else {
                    // Valid Login attempt -> Assign a jwt to the localStorage
                    localStorage.setItem('jwt', response.id_token);
                    // route to the dashboard
                    this.router.parent.navigate('/dashboard');
                }
            });
    }
}

错误

异常：类型错误：无法读取未定义的属性“父级” angular2.dev.js:22448 STACKTRACE: angular2.dev.js:22448 类型错误：无法读取未定义的属性“父级” 在 eval (login.js:34) 在 Zone.run (angular2.dev.js:136) 在 Zone.execute.$__3._createInnerZone.zone.fork.fork.$run [as run] (angular2.dev.js:16437) 在 zoneBoundFn (angular2.dev.js:109) 在 lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1359) 在 lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1371) 在 lib$es6$promise$$internal$$publish (angular2.dev.js:1342) 在 angular2.dev.js:187 在 Zone.run (angular2.dev.js:136) 在 zoneBoundFn (angular2.dev.js:109)

【问题讨论】：

如果在构造函数中添加this.router = router;会怎样？除此之外，router in alpha34 显然还有其他问题
显然我做到了。您现在可以在 github 中访问整个 repo：github.com/debanjanbasu/inventman
运行它只需运行：mongod, npm install。 nodemon (Windows) 或 sudo nodemon(OSX/Linux)
顺便提个小技巧，如果你按照 es6 语法初始化为 constructor(public router:Router){} 就相当于声明 router:Router constructor(router:Router){this.router=路由器;}。当您将变量声明为 public 时，它会自动在全局范围内分配。

标签： navigation typescript router alpha angular

【解决方案1】：

这个问题的答案很简单。不知何故，从 cli 运行时新的 beta typescript 编译器似乎完全避免了 angular 的 DI。从 IDE (Sublime 3) 插件编译似乎已经解决了这个问题。

我已经进一步改进了代码，应该很快将其与屏幕截图一起推送到 GIT，以供其他人参考和使用。

【讨论】：