router.navigate funktioniert nicht, wenn sie von Knopfelement in angular2

Question

genannt Dies ist meine eine der Komponenten:

@Component({ 
    selector: 'login-view', 
    templateUrl: 'app/login/login.component.html', 
    directives: [MATERIAL_DIRECTIVES, FORM_DIRECTIVES] 
}) 
export class LoginComponent implements OnInit{ 

    loginForm: ControlGroup; 

    constructor(
     private _formBuilder: FormBuilder, private _router: Router) { 
    } 

    ngOnInit() { 
     // some stuffs 
    } 

    submitLoginForm(){ 
     // to be implemented 
    } 

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

    goToResetPassword(){ 
     this._router.navigate(['/ResetPassword']); 
    } 
} 

Dies ist die Vorlage für die obige Komponente:

<form [ngFormModel]="loginForm" (ngSubmit)="submitLoginForm()"> 

    <input md-input ngControl="mobileNumber" type="number" id="mobileNumber"> 

    <input md-input type="password" ngControl="password" id="password"/> 

    <button md-raised-button type="submit" class="md-raised md-primary">Login</button> 

    <div> 
     // These Work 
     <a md-button class="md-primary" (click)="goToResetPassword()">Forgot password?</a> 
     <a md-button class="md-primary" (click)="goToRegister()">New here? Register</a> 

     //These don't work, reloads the app 
     <button md-button class="md-primary" (click)="goToResetPassword()">Forgot password?</button> 
     <button md-button class="md-primary" (click)="goToRegister()">New here? Register</button> 
    </div> 
</form> 

Wenn am Rufen Sie goToResetPassword() oder goToRegister() von (click)<a> es funktioniert, wie es soll.

Aber es funktioniert nicht Wenn ich das HTML-Element in <button> ändere, lädt es nur die gesamte App neu, ohne einen Fehler in der Konsole zu werfen.

Answer 1

Dies auch

(click)="goToResetPassword();false" 

zu verhindern, das Standard einreichen Verhalten der Schaltfläche funktionieren könnte.

Answer 2

Versuchen Sie, diese für Sie arbeiten kann: -

<a type="button" class="btn "    
    [routerLink]="['/Foo']">{{labels.CancelBtnText}}</a>