Angular调用Service方法无效，路由异步导致server为undefined的解决办法

问题根源 #

你推测的方向完全正确，核心问题出在异步执行顺序上：

• this.route.params.subscribe()是异步操作，回调里的this.id = params['id']不会立刻执行
• 你写在订阅外面的this.serversService.getServer(this.id)是同步执行的，这时候this.id还没被赋值，传进去的是undefined，Service的find方法找不到匹配数据，自然返回undefined
• 还有个隐藏坑：路由参数params['id']是字符串类型，而Service里服务器的id是数字类型，直接用===比对也会匹配失败（哪怕你后来拿到了id）

解决步骤 #

1. 把Service调用移到订阅回调内部，确保拿到有效id后再请求数据
2. 将路由参数的id转为数字类型，保证和Service里的id类型一致
3. 给模板加安全防护，避免server为undefined时触发报错

修改后的代码示例 #

Server组件TS代码 #

export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};
  id: number

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

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      // 把字符串id转为数字（+号是快速转数字的写法）
      this.id = +params['id'];
      console.log(this.id);
      // 拿到有效id后再调用Service方法
      this.server = this.serversService.getServer(this.id);
      console.log(this.server);
    });
  }
}

Server模板代码（二选一） #

方案1：使用安全导航操作符?.（推荐）

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

方案2：使用*ngIf控制渲染

<div *ngIf="server">
  <h5>{{ server.name }}</h5>
  <p>Server status is {{ server.status }}</p>
</div>

额外优化建议 #

如果你的组件不需要响应同路由下的参数变化（比如从servers/1跳转到servers/2时允许组件重新初始化），可以用路由快照简化代码：

ngOnInit() {
  this.id = +this.route.snapshot.params['id'];
  this.server = this.serversService.getServer(this.id);
}

但如果需要在当前组件内监听参数变化（比如切换不同服务器时不刷新组件），还是要保留订阅的写法。

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