时间戳

首页 > 解决方案 > 清理代码的最佳方法

angular - 清理代码的最佳方法

问题描述

我有数组

let awards = [
      {
        finished: 1,
        awardName: 'The beginning',
        description: 'Complete one excersise'
      },
      {
        finished: 5,
        awardName: 'Five of a kind',
        description: 'Complete five excersises'
      },
    ]

在我的组件中，它使我的代码变得混乱。那么最佳实践是什么，我应该把它放在哪里。在我看来，我认为它应该转到单独的文件awards.ts，然后将其导入我的组件？我像这样使用那个数组

this.awards.forEach(award => {
    if (this.numbOfFinished === award.finished) {
      if (res.find(r => (r.key === award.awardName)))  ...

是否有专门的文件类型，例如接口或 typescript / Angular 中的某些东西？谢谢。

标签： angulartypescript

解决方案

我通常会将这些生成的对象放在单独的服务中。

创建一个 AwardService 并实现一个 getter，（如果需要）一个 setter 和一个构造函数。

在构造函数中构建你的对象（例如）。

在您需要的地方导入服务以获得奖励对象的实例。

那是干净和可回收的。

例子

import { Injectable } from '@angular/core';

@Injectable()
export class AwardService {

    private awards: any;

    constructor() {
        this.awards = [
              {
                finished: 1,
                awardName: 'The beginning',
                description: 'Complete one excersise'
              },
              {
                finished: 5,
                awardName: 'Five of a kind',
                description: 'Complete five excersises'
              },
        ]
    }

    public getAwards(): any {
        return this.awards;
    }

    // if needed
    public setAwards(value: any) {
        this.awards = value;
    }
}

推荐阅读