Angular页面跳转求助：点击注册按钮无法跳转至注册页

作为Angular新手，你直接用href指向组件HTML文件的方式是错误的——Angular是单页应用，需要通过路由系统实现页面跳转。按以下步骤修改即可：

1. 配置路由规则 #

打开app-routing.module.ts，添加主页面和注册页面的路由映射：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件
import { HomeComponent } from './home/home.component'; // 主页面组件
import { RegistrationComponent } from './registration/registration.component'; // 注册组件

const routes: Routes = [
  { path: '', component: HomeComponent }, // 默认加载主页面
  { path: 'register', component: RegistrationComponent }, // 注册页路由
  { path: '**', redirectTo: '' } // 未知路径重定向到主页面
];

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

2. 添加路由出口 #

在根组件模板app.component.html中添加<router-outlet>，这是Angular渲染路由组件的容器：

<router-outlet></router-outlet>

如果你的导航栏和主页面内容都在HomeComponent里，切换到注册路由时，HomeComponent会被完全替换，自然实现“主页面消失”的效果。

3. 修改导航链接 #

把导航里的注册链接替换为Angular的routerLink指令（不要用普通href）：

<!-- 修改后的注册链接 -->
<a routerLink="/register" class="bold rem">Register</a>

其他导航项如果需要单页跳转，也可以用同样方式替换，比如：

<li class="rem"><a routerLink="/job-offers" class="color">Job offers</a></li>

4. 确认组件已注册 #

检查app.module.ts，确保RegistrationComponent和HomeComponent已在declarations数组中声明，并且导入了AppRoutingModule：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RegistrationComponent } from './registration/registration.component';

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

完成以上步骤后，点击Register按钮就能正常跳转到注册页面，同时主页面内容会被替换消失。

内容的提问来源于stack exchange，提问作者saDpooro