Angular 14：即使 URL 中的路径发生变化，应用程序也不会路由答案

【问题标题】：Angular 14: App not routing even though path changes in the URLAngular 14：即使 URL 中的路径发生变化，应用程序也不会路由
【发布时间】：2022-11-14 10:42:36
【问题描述】：

我正在建立一个基本的 Angular 网站，但我的路由似乎不起作用。

我有一个 app.component.html 页面（目前作为我的主页）：


        <li class="nav-item active">
          <a class="nav-link" [routerLink] = "['']">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink] = "['login']" >Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink] = "['register']" routerLinkActive = "active" >Register</a>
        </li>

然后我有一个登录和注册组件，非常基本：

和

登记

它们都包含在我的 authModule 中：

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {LoginComponent} from "../components/login/login.component";
import {RegisterComponent} from "../components/register/register.component";

@NgModule({
  declarations: [
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    CommonModule
  ],
  exports : [
    LoginComponent,
    RegisterComponent
  ]
})
export class AuthModule { }

那么这是我的 app.module：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AuthModule} from "./auth/auth/auth.module";

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

最后是我的 app-routing.module：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from "./auth/components/login/login.component";
import {RegisterComponent} from "./auth/components/register/register.component";
import {AppComponent} from "./app.component";

const routes: Routes = [
  {path: "", component: AppComponent, pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
];

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

当应用程序加载时，它显示 http://localhost:4200/ 并正确显示我的主页。

但是，当我单击“登录”按钮时，网址会更改为：

http://localhost:4200/login

但不会改变页面上的内容。

我想知道是否有人可以提供帮助。

谢谢你：）

【问题讨论】：

标签： angular angular14

【解决方案1】：

根页面上有<router-outlet></router-outlet>吗？我想你错过了这个。

您可以在这里阅读更多相关信息：https://angular.io/api/router/RouterOutlet

【讨论】：

【解决方案2】：

    <li class="nav-item active">
      <a class="nav-link" [routerLink] = "'/'">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink] = "'/login'" >Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink] = "'/register'" routerLinkActive = "active" >Register</a>
    </li>

【讨论】：