Question

所以我遇到了两个与路由器/路由/路由器插座有关的组件的问题。在我的登录表单中，当用户输入信息（电子邮件和密码）并单击登录时，应将其路由到仪表板。

请参阅下面的登录表单组件及其随附的ts / css / html文件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {AngularFireAuth} from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import {Observable} from 'rxjs/Observable';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
user: Observable<firebase.User>;
authenticated: boolean = false;
error: any;
  constructor(private router:Router,public af: AngularFireAuth) { 
this.af.authState.subscribe(
  //look at this again
  (auth) => {
    if (auth != null){
      this.user = af.authState;
      this.authenticated = true;
      this.router.navigate(['dashboard']);
    }
  }
)
  }

  ngOnInit() {
  }

  loginUser(e){
    e.preventDefault();
  console.log(e.value);
  var email = e.target.elements[0].value;
  var password = e.target.elements[1].value;
  console.log(email,password);
  this.af.auth.signInWithEmailAndPassword(email,password)
  .then((success) => {
    console.log(success)
    this.authenticated = true;
    console.log("attempting to nav");
    this.router.navigate(['dashboard']);
    console.log("nav worked");
  }).catch((err) => {
    this.error= err;
  })
//end of if statement
  }//end of login user 

}

登录表单的HTML

<div class="form">
<span class="error" *ngIf="error">{{ error }}</span>
<form  (submit) = "loginUser($event)">
<input type="text" placeholder="Email Address"/>
<input type="password" placeholder="Password"/>
<button type = "submit">login</button>
</form>
</div>

appCompnent的HTML，用于控制您看到的第一个屏幕，其中包含登录表单

<div id = "fullPage">
<app-header></app-header>
<app-login-form></app-login-form>
<app-footer></app-footer>
</div>

包含路线的AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '@angular/router';
import {Router} from '@angular/router';
import { Route } from '@angular/compiler/src/core';

//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';

//Forms
import {FormsModule} from '@angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '@angular/core/src/metadata/directives';

const appRoutes:Routes = [
  {
    path: 'login',
    component: LoginFormComponent
  },{
    path: 'dashboard',
    component: DashboardComponent
  },{
    path: 'events',
    component: EventsComponent
  },{
    path: 'add-event',
    component: AddEventComponent
  },{
    path: 'edit-event/:id',
    component: EditEventComponent
  },{
    path: 'delete-event/:id',
    component: DeleteEventComponent
  },{
    path: 'event-details',
    component: EventDetailsComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginFormComponent,
    FooterComponent,
    DashboardComponent,
    EventsComponent,
    EventDetailsComponent,
    AddEventComponent,
    EditEventComponent,
    DeleteEventComponent,
    NavbarComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我遵循了很多教程，所以我相信我做得对。但是，它不会转到仪表板。任何提示？是因为我没有路由器插座代替app-login-form？

Answer 1

通过上面的代码片段，您似乎错过了“router-outlet”标记，该标记需要包含在您尝试导航到仪表板页面的模板中。它应该可以解决您的问题。

路由器故障

1 个答案: