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

Posted 2023-02-22

【中文标题】自版本 alpha 34 以来，Angular 2 路由器损坏

【英文标题】：Angular 2 Router broken since version alpha 34

【发布时间】：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
    ]);

login.ts

/// <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 时，它会自动在全局范围内分配。

【参考方案1】：

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

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