Angular 2頁重新加載而不是安慰我們注冊或登錄

Question

我現在正在通過注冊和登錄表單並連接到firebase來學習路線。

以下是指定每個路由的routes.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './auth/signin/signin.component';
import { SignupComponent } from './auth/signup/signup.component';
const appRoutes: Routes = [
    {path: '', redirectTo:'/signup', pathMatch:'full'},
    {path: 'signin', component: SigninComponent},
    {path: 'signup', component: SignupComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports:[RouterModule]
})
export class AppRoutingModule { }

然后這是注冊表單和它的打字稿文件：

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignup(f)" #f="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" id="email" ngModel>
    </div>
    <div class="form-group">
        <label for="Password">Password</label>
        <input type="Password" class="form-control" name="Password" id="Password" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <a [routerLink]="['/signin']">You already have an account ? Sign In</a>

</div>

Signup.ts：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {AuthService} from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;

    this.authService.signupUser(email, password);
  }

}

如你所見，我有onSignup（）函數。

對於登錄組件也是如此：

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignin(f)" #f="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" id="email" ngModel>
    </div>
    <div class="form-group">
        <label for="Password">Password</label>
        <input type="Password" class="form-control" name="Password" id="Password" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <a [routerLink]="['/signup']">Click to register</a>
</div>

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service'
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignin(form: NgForm)
  {
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signinUser(email, password);
  }
}

包含signinUser()和singupUser()方法的身份驗證服務文件腳本：

import * as firebase from 'firebase';
export class AuthService {
    signupUser(email: string, password: string)
    {
        firebase.auth().createUserWithEmailAndPassword(email, password)
            .catch(
                error=>console.log(error)
            )
    }

    signinUser(email: string, password: string)
    {
        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(
                response => console.log(response)
            )
            .catch(
                error => console.log(error)
            )
    }
}

這里的問題是，當我注冊一個新用戶時，將重新加載所有頁面，並且沒有任何內容添加到firebase數據庫。

所以我在firebase上手動創建了一個用戶，並嘗試了登錄表單，然后再次重新加載頁面，控制台中沒有任何內容（無輸出，無錯誤）

Answer 1

我剛剛遇到這個問題，我的頭發被撕了一個小時。 正確配置的表單將在提交時重新加載頁面的原因是ts文件中的onSubmit（）方法存在錯誤。 這個很難追溯，因為問題實際上是在我的initializeApp方法中。 確保使用apiKey和authDomain傳遞的對象是正確的。 在我的情況下，我打字了

{api: "...mykey...", authDomain: "...myurl..."}

而不是api Key 。 另外請務必正確復制您的身份驗證網址。 不要把http：//放在前面。

因此，登錄和注冊方法不知道使用什么url和api密鑰，因為初始化從未正確完成並存儲在SDK中。 我希望這有助於解決問題的根源。