Angular应用点击单个路由后无法继续路由的问题排查

我是Angular新手，使用Router模块开发时遇到问题：Servers组件包含3个服务器条目，预期点击每个条目时，在同一页面的<router-outlet>中显示对应Server组件，但目前只有第一个服务器的点击操作有效，后续点击其他服务器无法触发路由切换更新视图。

相关代码文件 #

app.module.ts #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ServersComponent } from './servers/servers.component';
import { UserComponent } from './users/user/user.component';
import { EditServerComponent } from './servers/edit-server/edit-server.component';
import { ServerComponent } from './servers/server/server.component';
import { ServersService } from './servers/servers.service';
import { RouterModule } from '@angular/router';

const appRoutes =[
  {path:"users",component:UsersComponent,
children:[
  {path:":id/:name", component:UserComponent},
]},

  {path:"",component:HomeComponent},

  {path:"servers", component:ServersComponent, children:[
    {path:":id" , component:ServerComponent},
    {path:":id/edit", component:EditServerComponent},
  ]
}
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UsersComponent,
    ServersComponent,
    UserComponent,
    EditServerComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),

  ],
  providers: [ServersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Servers.component.html #

<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="list-group">
      <a
        class="list-group-item"
        *ngFor="let server of servers"
        [routerLink] = "['/servers', server.id]"
        [queryParams]="{editable:1}"
        fragment="loading">
        {{ server.name }}
      </a>
    </div>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Server.component.ts #

import { Component, OnInit } from '@angular/core';
import { ServersService } from '../servers.service';
import { Router , ActivatedRoute} from  '@angular/router';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};
  id:number;
  queryParamsfromURL:{queryparams:""} = {queryparams:""};
  fragmentsFromURL:string=""

  constructor(private serversService: ServersService, private route: ActivatedRoute) {

       }

  ngOnInit() {
    this.id = +this.route.snapshot.params['id'];
    this.route.params.subscribe(
      params => {this.id = +params['id']}
    )
    this.server = this.serversService.getServer(+this.id);
    console.log(this.server);
//queryparams and fragments 
    this.queryParamsfromURL.queryparams = this.route.snapshot.queryParams['editable'];
    this.route.queryParams.subscribe(
      newqueryparams => {this.queryParamsfromURL = newqueryparams.editable}
    );
    
    this.fragmentsFromURL = this.route.snapshot.fragment;
    this.route.fragment.subscribe(
      fragmentchange => {this.fragmentsFromURL = fragmentchange}
    )   
  }
}

Server.component.html #

<div >
<h5> {{server.name}}</h5>
<p>Server status is {{server.status}}</p>
</div>

问题原因与修复方案 #

核心问题 #

1. 路由参数(params)变化时，仅更新了id变量，但未重新调用服务获取对应服务器数据，导致视图未更新
2. queryParams订阅中的赋值逻辑错误，将字符串类型的editable值直接赋值给对象类型的queryParamsfromURL，引发类型不匹配

修复后的Server.component.ts代码 #

import { Component, OnInit } from '@angular/core';
import { ServersService } from '../servers.service';
import { ActivatedRoute} from  '@angular/router';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};
  queryParamsfromURL: {editable?: string} = {};
  fragmentsFromURL = "";

  constructor(
    private serversService: ServersService, 
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    // 初始化加载数据
    this.loadServerData(+this.route.snapshot.params['id']);
    
    // 监听路由参数变化，重新加载对应服务器数据
    this.route.params.subscribe(params => {
      const newId = +params['id'];
      this.loadServerData(newId);
    });

    // 处理查询参数初始化与变化监听
    this.queryParamsfromURL.editable = this.route.snapshot.queryParams['editable'];
    this.route.queryParams.subscribe(newQueryParams => {
      this.queryParamsfromURL.editable = newQueryParams.editable;
    });

    // 处理锚点初始化与变化监听
    this.fragmentsFromURL = this.route.snapshot.fragment || "";
    this.route.fragment.subscribe(fragmentChange => {
      this.fragmentsFromURL = fragmentChange || "";
    });
  }

  // 封装服务器数据加载逻辑
  private loadServerData(id: number) {
    this.server = this.serversService.getServer(id);
    console.log(this.server);
  }
}

关键修改点 #

• 新增loadServerData方法封装数据获取逻辑，避免重复代码
• 在params订阅回调中调用loadServerData，确保路由参数变化时同步更新视图数据
• 修正queryParamsfromURL的类型定义与赋值逻辑，解决类型不匹配问题
• 优化锚点处理逻辑，添加空值判断避免潜在报错

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