無法使用router.nagivate在angular2

我使用"angular2": "2.0.0-beta.15"（與"typescript": "^1.8.10",）和AppComponent是隻是工作作爲我的外殼主要成分和處理導航導航：無法使用router.nagivate在angular2

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更改，然後應用重載本身到相同的頁面/組件。控制檯中沒有顯示錯誤。

來源

2016-04-24 Rohit Arya

只是提示 - 刪除'ROUTER_PROVIDERS'，並在引導你的應用程序的時候。 –

如果僅將其添加到根組件上，則可以，但不要將其添加到其他組件。如果將它添加到'bootstrap（）'中，請不要將它添加到任何組件。 –

我已將它添加到「AppComponent」中。只是嘗試將它移動到'bootstrap（AppComponent，[ROUTER_PROVIDERS]）;'仍然是相同的行爲。 –

我也發現了你在這個項目中看到的同樣的行爲。就我而言，我在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

來源

2016-04-26 02:06:45

改用

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

，如果你從一個孩子分量的路徑。

來源

2016-04-24 14:51:30

試過了。同樣的行爲。 –

無法使用router.nagivate在angular2

回答

相關問題