如何在 Angular 中使用计算/计算属性？

Question

我被这个问题折磨着：我应该在角度项目中的哪里找到我的计算属性？

例如：我有模型、获取模型的服务和显示模型的组件。

人.模型.ts：

export class Person {
  firstName: string;
  lastName: string;
}

person.service.ts：

export class PersonService {

  // inject http: HttpClient

  get(id) {
   return this.http.get<Person>(`api-endpoint/person/${id}`);
  }
}

person.component.ts

@Component({
  selector: 'app',
  template: `
   <div>
    <input [value]='person.firstName'>
    <input [value]='person.lastName'>
   </div>
`,
  providers:  [ PersonService ]
})
export class AppComponent {
  person: Person;

  // inject personService: PersonService

  ngOnInit() {
   personService.get(1).subscribe(p => this.person = p);
  }
}

现在我需要fullName将其显示到输入字段下的模板中。

选项 1。如果您搜索“角度计算属性”，您很可能会在组件本身中找到具有计算属性的示例。

@Component({
  selector: 'app',
  template: `
   <div>
    <input [value]='person.firstName'>
    <input [value]='person.lastName'>
    <span>{{ fullName }}</span>
   </div>
`,
  providers:  [ PersonService ]
})
export class AppComponent {
  person: Person;
  get fullName() {
    return `${this.person.firstName} ${this.person.lastName}`
  }
  // inject personService: PersonService

  ngOnInit() {
   personService.get(1).subscribe(p => this.person = p);
  }
}

但这是放置此类代码的正确位置吗？如果我们想在其他组件、服务等中重用这个属性怎么办？

选项2.我个人想延长person.model.ts。

export class Person {
  firstName: string;
  lastName: string;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`
  }
}

@Component({
  selector: 'app',
  template: `
   <div>
    <input [value]='person.firstName'>
    <input [value]='person.lastName'>
    <span>{{ person.fullName }}</span>
   </div>
`,
  providers:  [ PersonService ]
})
export class AppComponent {
  person: Person;
  // inject personService: PersonService

  ngOnInit() {
   personService.get(1).subscribe(p => this.person = p);
  }
}

但接下来我们面临另一个问题。我们的personService返回对象根本没有这个 getter。

所以我该怎么做？我是否需要创建 的新实例，person.model.ts然后将我们的响应分配给它，或者我可能需要另一个模型，例如person.view-model.ts？

感谢您的宝贵时间：D

Answer 1

我将添加一个我认为非常有用的模式。我个人喜欢保持关注点分离 - 即保留所有Person相关的计算属性PersonService并直接从服务中使用这些属性。特别是当您在其他地方使用它们时。在您的模板中PersonService，我将添加一个BehaviourSubject可以绑定到其他地方的模板：

// person.serice.ts

private readonly _fullName: BehaviorSubject<string> = new BehaviorSubject('');
public readonly fullName$ = this._fullName.asObservable();

public get fullName(): string {
    return this._fullName.getValue();
}

public set fullName(p: Person): string {
    this._fullName.next(p.firstName + p.lastName);
}

// inject http: HttpClient

get(id) {
   return this.http.get<Person>(`api-endpoint/person/${id}`)
       .pipe(tap((p: Person) => this.fullName = p);
}

在你的组件中：

// person.component.ts

@Component({
  selector: 'app',
  template: `
   <div>
    <input [value]='person.firstName'>
    <input [value]='person.lastName'>
    <span>{{ fullName$ | async }}</span>
   </div>
`,
  providers:  [ PersonService ]
})
export class AppComponent {
  person: Person;
  fullName$: Observable<string>;

  // inject personService: PersonService

  ngOnInit() {
   this.fullName$ = this.personService.fullName$;
   this.personService.get(1).subscribe(p => this.person = p);
  }
}