Angular 8 this.router.navigate() 更改 URL 但不呈现到下一页

Question

我是 Angular 的新手，我正在 Angular 8 中设置一个项目的前端，最终将使用 REST API 来显示数据。目前我已经创建了 2 个自定义组件。

1. LoginComponent
2. HomeComponent

当我点击登录按钮时，我的目标只是从LoginComponent html 重定向到HomeComponent html。

LoginComponent 和 HomeComponent 都在同一目录级别。

以下是文件的内容。

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    
    import { AppComponent } from './app.component';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    import { AppRoutingModule } from './app-routing.module';
    import { ErrorPageComponent } from './error-page/error-page.component';
    import { HeaderComponent } from './header/header.component';
    import { LoginComponent } from './login/login.component';
    import { HomeComponent } from './home/home.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        PageNotFoundComponent,
        ErrorPageComponent,
        HeaderComponent,
        LoginComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    import { ErrorPageComponent } from './error-page/error-page.component';
    import {LoginComponent} from './login/login.component';
    import {HomeComponent} from './home/home.component';
    
    const appRoutes: Routes = [
      { path: '', component : LoginComponent},
      { path: 'home', component : HomeComponent },
      { path: 'not-found', component: PageNotFoundComponent },
      { path: '**', redirectTo: '/not-found' }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(appRoutes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
    
    }

app.component.html

    <div class="web-container">
    
      <div>
      <app-header>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </app-header>
      </div>
    
      <app-login></app-login>
      <router-outlet></router-outlet>
    
    </div>

login.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {
    
      constructor(private router: Router) { }
    
      ngOnInit() {
      }
    
      public onLoginClick(){
        console.log("Login Clicked");
        this.router.navigate(['./home']);
      }
    
    }

login.component.html

    <div class="content">
      <h3>Login</h3>
      <hr />
      <form>
        <button class="btn btn-primary mybtn-login" (click)="onLoginClick()" >Login</button>
      </form>     
    </div>

home.component.html

    <h1  style="color:yellow;">home works!</h1>

home.component.ts

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      constructor() { }
    
      ngOnInit() { }
    }

问题

当我点击 Login 按钮时，我可以在浏览器中看到它会将 URL 从 http://localhost:4200/ 更改为 http://localhost:4200/home。但是，它不显示 home.component.html

的任何内容

它只是停留在登录页面视图上，页面上没有任何变化。

我真的很困惑为什么它会更改 URL 但不呈现页面。我尝试将<router-outlet> 添加到login.component.html 中，它会在登录页面inside 中显示主页。但是我们当然不想留下/继续显示登录页面。

提前致谢。

Answer 1

您在app.component.html 中添加了<app-login></app-login> 和<router-outlet></router-outlet>。这意味着 Login 组件将始终显示在屏幕上，并且它下面的内容会发生变化。您的 Home 组件可能已渲染，但您没有看到它，因为 Login 页面停留在屏幕上。只需删除<app-login></app-login>，因为它会自动以<router-outlet></router-outlet> 呈现，因此您无需显式指定它。

<div class="web-container">

  <div>
  <app-header>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </app-header>
  </div>

  <router-outlet></router-outlet>

</div>

Answer 2

看起来它没有到达路线并回落到空的路线

  { path: '', component : LoginComponent},  <--- falling back on this
  { path: 'home', component : HomeComponent },
  { path: 'not-found', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/not-found' }

这样，您会看到它正在加载您所在的同一条路线。 您的路由器是一级深度，因此this.router.navigate(['./home']); 正在搜索未定义的级别，导致回退

this.route.navigate(['/home']) 应该可以工作

Answer 3

请记住，路由不一定要导航到组件目录，而是导航到您在 app-routing.module.ts 文件中定义的路径/路由。

app-routing.module.ts 文件是根据您在路由模块中定义Routes 路径的方式处理需要加载的组件的文件。

因此您需要删除点并将其放置如下：

this.router.navigate(['/home']);

路由器会根据app-routing.module.ts 文件的路径中的定义确定需要加载哪个组件。

即使组件与LoginComponent不在同一目录下，只要你在路由器中定义了路径'home'路径来链接HomeComponent，路由器就会知道要连接哪个文件加载。