无法在 angular2 中使用 router.nagivate 进行导航

Question

我正在使用 "angular2": "2.0.0-beta.15"（与 "typescript": "^1.8.10",）并且 AppComponent 是我的主要组件，它只是作为 shell 工作并处理导航：

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {LoginComponent} from "./login/login.component";
import {RegisterComponent} from "./registration/register.component";

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    {
        path: '/login',
        name: 'Login',
        component: LoginComponent,
        useAsDefault: true
    },
    {
        path: '/register',
        name: 'Register',
        component: RegisterComponent
    }
])
export class AppComponent {

}

LoginComponent 和 RegisterComponent 都有相互导航的链接。

这就是我尝试导航的方式：

@Component({
   ...
})
export class LoginComponent implements OnInit{

    constructor(private _router: Router) {

    }

    ngOnInit() {
       // some stuffs
    }

    goToRegister(){
        this._router.navigate(['Register']); //also tried this._router.navigate(['/Register']);
    }
}

同样地：

@Component({
   ...
})
export class RegisterComponent implements OnInit{

    constructor(private _router: Router) {

    }

    ngOnInit() {
        // some stuffs
    }

    goToLogin(){
        this._router.navigate(['Login']); // also tried this._router.navigate(['/Login']);
    }
}

但是当我尝试导航时，url 改变了片刻，然后应用程序 重新加载 本身到相同的 page/component。控制台中没有显示任何错误。

Answer 1

改用

this._router.navigate(['/Register'])
this._router.navigate(['/Login'])

如果您从子组件路由。

Answer 2

我也在我正在处理的项目中发现了您在此处看到的相同行为。就我而言，我在 Chrome 和 Safari 中看到了这种行为，但 Firefox 似乎不受影响。

~~我不确定根本原因，但我触发 router.navigate 的方式是~~

<button class="btn btn-default" (click)="lookupName()">Lookup</button>

将其更改为

<a class="btn btn-default" (click)="lookupName()">Lookup</a>

~~为我解决了这个问题。可能不是您正在寻找的答案，但这让我发疯，很高兴这为我解决了问题。~~

对此进行更多研究，将元素更改为 <a></a> 不太理想，因为它删除了漂亮的表单提交输入功能。我设法在保持与以前相同的功能的同时修复它，希望它对您有所帮助。

我更改了我的模板：

<form class="form-inline">
    <div class="form-group">
       <input type="text" class="form-control" [(ngModel)]="name" placeholder="Name" required>
       <button type="submit" class="btn btn-default" (click)="lookup()">Lookup</button>
    </div>
</form>

看起来像这样：

<form class="form-inline" (ngSubmit)="lookup()">
    <div class="form-group">
        <input type="text" class="form-control" [(ngModel)]="name" placeholder="Name" required>
        <button type="submit" class="btn btn-default">Lookup</button>
    </div>
</form>

这似乎解决了我的问题。看完这个我有了主意：https://angular.io/docs/ts/latest/guide/forms.html

无法在 angular2 中使用 router.nagivate 进行导航

Unable to navigate using router.nagivate in angular2

typescript

angular

angular2-routing