angular 8 个页面未重定向（点击卡在同一页面）

Question

我的应用没有重定向到其他页面，url 发生变化但页面内容保持不变。提前致谢。

app.component.html

<section id="login-page">
    <div class="container-fluid">
      <div class="row d-flex align-content-center vh-100">
        <div class="col-7 left-sec align-self-center">
          <div class="content-sec">
            <h2 class="mb-5">Sign In to continue</h2>
            <img class="mt-3" src="../assets/images/login-v2.72cd8a26.svg">
          </div>
        </div>
        <div class="col-5 right-sec align-self-center">
            <form>
                <div class="form-group">
                  <input type="email" class="form-control" id="empid" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="empPass">
                </div>
                <a routerLink="/dash">Dashboard</a>
                <button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
              </form>
        </div>
      </div>
    </div>
  </section>
  <router-outlet></router-outlet>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { LeftNavComponent } from './_hx/left-nav/left-nav.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    EmpDashComponent,
    EmpProfileComponent,
    LeftNavComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';



const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: AppComponent },
  { path: 'dash', component: EmpDashComponent },
  { path: 'profile', component: EmpProfileComponent },
  { path: '**', component: PageNotFoundComponent }
];

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

我不确定我哪里做错了，编译后没有错误ui，同时点击登录按钮url改变但页面内容没有改变。请告诉我，我哪里做错了。

Answer 1

不要在您的提交按钮上使用 routerLink：相反，在您设置提交逻辑的 component.ts 中，使用 Angular 路由器：

if(isLoginOk(this.loginData)){
   this.router.navigateByUrl(`/dash`);
}

无论如何，那是行不通的，因为写的是“破折号”而不是“/破折号”：

<button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
<!-- change to -->
<button type="submit" class="btn p-cta" routerLink="/dash" routerLinkActive="active">Submit</button>

angular 8 个页面未重定向（点击卡在同一页面）

angular 8 page not redirecting ( on click stuck to same page )

url-routing

angular-ui-router

angular