使用 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。

使用 Angular 的路由问题

Routing Issue using Angular

routes

angular