Angular中如何在Observable返回空属性对象

在Angular项目中，组件通过this.route.snapshot获取由Resolver传入的Person对象，存在两种场景：Resolver返回带数据的对象，或返回所有属性为空值的对象。当前第二种场景需要逐个手动设置所有属性（比如return of({personId: '', firstName: '', lastName: '', group: this.personGroup});），但当对象包含大量属性（甚至嵌套对象/数组）时，这种写法过于繁琐，希望找到更简便的方式。

相关代码示例 #

person.ts #

export interface Person {
    personId: string;
    firstName: string;
    lastName: string;
    group: Group;
}

person.component.ts #

...
ngOnInit(): void {
   const person: Person = this.route.snapshot.data['person'];
...
}

person.resolver.ts #

@Injectable({
  providedIn: 'root'
})
export class PersonResolver implements Resolve<Person> {

  constructor(private service: PersonsService){ }
  
  personGroup: PersonGroup = {groupId: '', groupName: ''...}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person> {
    return of({personId: '', firstName: '', lastName: '', group: this.personGroup, ...});   
  }
}

尝试过的无效方案及报错 #

• return null;：类型错误，提示“Type 'null' is not assignable to type 'Observable'”
• let person = {} as Person; return person;：类型不匹配，提示“Type 'Person' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.”
• return new Observable<Person>;：无编译报错，但组件的ngOnInit无法继续执行
• let person: Partial<Person> = {}; return person;：类型不匹配，提示“Type 'Partial' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more”
• let person: Person | Record<string, never> = {}; return person;：类型不匹配，提示“Type 'Record<string, never>' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.”

可行解决方案 #

方案1：类型断言结合of()返回空结构 #

直接创建空对象并断言为Person，再用of()包裹，这是最简便的写法（需注意：若组件直接访问嵌套属性，可能出现运行时错误，因为属性实际不存在）：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person> {
  return of({} as Person);
}

方案2：编写默认值工厂函数 #

针对Person及嵌套接口编写生成默认空对象的函数，后续可复用，能避免嵌套属性访问报错：

// 生成Group默认值
function getDefaultGroup(): Group {
  return { groupId: '', groupName: '' };
}

// 生成Person默认值
function getDefaultPerson(): Person {
  return {
    personId: '',
    firstName: '',
    lastName: '',
    group: getDefaultGroup()
  };
}

// Resolver中调用
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person> {
  return of(getDefaultPerson());
}

方案3：用类代替接口 #

将Person接口改为类，在类中设置属性默认值，直接实例化即可：

// person.ts
export class Person {
  personId = '';
  firstName = '';
  lastName = '';
  group: Group = { groupId: '', groupName: '' };
}

// Resolver中使用
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person> {
  return of(new Person());
}

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