router.navigate 在 Angular2 中从按钮元素调用时不起作用

Question

这是我的组件之一：

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

这是上述组件的模板：

<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>

如果我从(click) <a>调用goToResetPassword()或goToRegister()，它会按预期工作。

但是，如果我将html元素更改为<button>，它不起作用，它只是重新加载整个应用程序而不会在控制台中引发任何错误。

Answer 1

这也可能有效

 (click)="goToResetPassword();false"

以防止按钮的默认提交行为。

Answer 2

试试这可能对你有用：-

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