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

问题描述

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

LoginComponent
HomeComponent

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

两者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 { }

应用程序路由.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>

登录组件.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() { }
    }

问题

当我单击登录按钮时，我可以在浏览器中看到它将 url 从更改http://localhost:4200/为http://localhost:4200/home. 但是，它不显示home.component.html的任何内容

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

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

提前致谢。

标签： javascriptangulartypescript

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

问题描述

解决方案

推荐阅读