Angular抽取路由参数请求逻辑到服务后模板数据不显示问题

当前实现无法正常渲染的核心问题有3个：

• 你在服务类中定义并赋值this.contact，但组件模板中绑定的contact是组件实例自身的属性，服务内的赋值操作不会同步到组件的属性上，模板拿不到对应值自然无法渲染。
• 服务方法内直接嵌套订阅，既没有把异步获取到的联系人数据返回给调用的组件，也没有做订阅回收逻辑，容易引发内存泄漏。
• 如果没有在服务的构造函数中注入ActivatedRoute实例，服务内部直接调用this.route会触发undefined报错。

改造服务层逻辑 #

不要在服务中存储contact这类和组件视图绑定的状态，把路由参数取数、接口请求的逻辑封装成返回可观察对象（Observable）的方法，由调用方决定如何处理返回数据：

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map, switchMap, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ContactsService {
  constructor(private route: ActivatedRoute) {}

  // 保留原有的接口请求方法
  GetContactByUserId(id: string) {
    // 原有接口请求逻辑不变
  }

  getContactFromRouteQuery() {
    return this.route.queryParamMap.pipe(
      map(paramMap => paramMap.get('id')),
      switchMap(id => id ? this.GetContactByUserId(id) : of(null))
    );
  }
}

组件层调用 #

在组件中调用服务的封装方法，订阅返回的数据流，将结果赋值给组件自身的contact属性即可，记得在组件销毁时取消订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-contact-detail',
  template: `{{ contact?.displayName }}`
})
export class ContactDetailComponent implements OnInit, OnDestroy {
  contact: any;
  private destroyNotifier = new Subject<void>();

  constructor(private contactsService: ContactsService) {}

  ngOnInit(): void {
    this.contactsService.getContactFromRouteQuery()
      .pipe(takeUntil(this.destroyNotifier))
      .subscribe(contactRes => {
        this.contact = contactRes;
      });
  }

  ngOnDestroy(): void {
    this.destroyNotifier.next();
    this.destroyNotifier.complete();
  }
}

模板中contact?.displayName的?.是安全导航符，避免contact未赋值时读取displayName抛出空指针错误。

如果不想在组件中手动处理订阅和生命周期回收，可以直接用Angular内置的async管道绑定数据流，省去手写订阅取消的逻辑：
组件类中只需要声明数据流属性：

contact$ = this.contactsService.getContactFromRouteQuery();
constructor(private contactsService: ContactsService) {}

模板中直接通过管道绑定：

{{ (contact$ | async)?.displayName }}

这种是Angular响应式开发的推荐写法，代码更简洁，也不容易出现内存泄漏问题。

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