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

Question

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

1. LoginComponent
2. HomeComponent

当我单击登录按钮时，我的目标只是被从HomeComponent html从LoginComponent 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，而不呈现页面。我尝试向login.component.html中添加<router-outlet>，后者在中显示登录页面中的主。但当然，我们不想停留/继续显示登录页面。

提前谢谢。

Answer 1

您在您的<app-login></app-login>中添加了<router-outlet></router-outlet>和<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位于同一个目录中，只要在路由器中定义了链接到HomeComponent的路径'home'路径，路由器就会知道要加载哪个文件。