使用 Angular 的路由问题

Question

我已经安装了 AngularCLI 并且一直在使用 VS Code 来创建我的网络应用程序。 到目前为止，我只创建了用于创建各个视图的文件夹。但是，尽管我的代码中没有错误，但我遇到了路由问题。 当我运行我的应用程序时，我会看到带有一些按钮的基本主屏幕，当我单击这些按钮时，我可以看到地址栏发生了变化，但视图没有变化。 它似乎只显示了我第一次创建项目时创建的初始 app.component.html 文件。 任何建议或帮助将不胜感激！ 提前致谢

代码如下：

app.component.html:

<p> Hello, World!</p>
<h1> TITLE TITLE </h1>
<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="navbar-nav">
      <a class="nav-item nav-link" routerLink="/">Home</a>
      <a class="nav-item nav-link" routerLink="/login">Login</a>
      <a class="nav-item nav-link" routerLink="/register">Register</a>
  </div>
</nav>

<!-- main content container -->
<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-sm-8 offset-sm-2">
              <router-outlet></router-outlet>
          </div>
      </div>
  </div>
</div>

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { HomePageComponent } from './home-page/home-page.component';
import { HeaderComponent } from './header/header.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginPageComponent,
    RegisterPageComponent,
    HomePageComponent,
    HeaderComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts: (I created this file for routing myself)

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

import { HomePageComponent } from './home-page/home-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

const routes: Routes = [
  { path: 'login', component: LoginPageComponent},
  { path: 'register', component: RegisterPageComponent},
  { path: 'home', component: HomePageComponent},

  { path: '**', redirectTo: ''}
];

export const appRoutingModule = RouterModule.forRoot(routes);

app-routing.module.ts: (this one was created when the project was first generated)

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

const routes: Routes = [
  { path: 'login' , }
];

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

Answer 1

您在app.module.ts 中导入app-routing.module.ts，但其中定义的唯一路由是登录，它没有要呈现的相应组件。

{ path: 'login' , }

我建议将您的路线定义从app.routing.ts 移动到app-routing.module.ts，然后删除app.routing.ts。