Angular路由传递用户名参数 无法在首页组件正常显示如何解决

问题原因 #

你遇到的用户名无法显示的问题，核心是两个常见的Angular开发遗漏点：

1. 路由配置未声明路径参数占位，导致参数无法被正确识别和读取
2. 未导入FormsModule导致双向绑定失效，跳转时传递的用户名为空

解决步骤 #

1. 修改路由配置，添加参数占位

打开你的路由配置文件（通常为app-routing.module.ts），将home路由的path修改为带:username参数的格式，示例如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  // 必须添加:username占位符，才能通过params['username']拿到传过来的值
  { path: 'home/:username', component: HomeComponent },
];

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

2. 确认导入FormsModule

因为login页面使用了[(ngModel)]双向绑定获取用户名，必须在组件所属的模块（通常为app.module.ts）中导入FormsModule才能生效，示例如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 引入FormsModule
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule // 加入到imports数组中
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 可选优化：调整参数读取逻辑

官方更推荐将参数读取逻辑放在ngOnInit生命周期钩子中执行，如果你不需要监听参数后续的变化，也可以直接用快照方式一次性获取参数，简化代码，修改后的home.ts示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  user = ''
  constructor(private activatedRoute:ActivatedRoute) { }

  ngOnInit(): void {
    // 方式1：订阅参数变化，适用于路由参数会动态更新的场景
    this.activatedRoute.params.subscribe((params)=>{ 
      this.user = params['username']
    })

    // 方式2：快照获取，适用于参数只传一次的场景，代码更简洁
    // this.user = this.activatedRoute.snapshot.params['username']
  }
}

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