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']);
    }
}

但是当我尝试导航时，网址会更改一段时间，然后应用重新加载本身到同一页面/组件。控制台中没有显示错误。

Answer 1

我也发现了你在我正在研究的项目中看到的这种行为。就我而言，我在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

Answer 2

改为使用

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

如果您从子组件路由。

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

2 个答案: