Javascript 角度-在项目中保留变量的最佳方法

我想知道在角度项目中保持变量的最佳方法是什么

我举了一个例子，假设我有一个包含许多变量的组件，但我不喜欢它使我的组件太长，而且透明度较低

...
@Component({
    selector: 'app-ballance',
    templateUrl: './balance.component.html',
    styleUrls: ['./balance.component.scss']
})
export class BalanceComponent implements OnInit {


    list = [];
    list3 = [];
    errorMsg;
    numbOfElem = 0;
    numbOfElem2 = 0;
    items: Array<any>;
    items2: Array<any>;
    pageOfItems: Array<any>;
    pageOfItems2: Array<any>;
    clickData = false;
    datas: any;
    correctBalance = false;
    wrongBalance = false;
    extraBalance  = false;
    administrator = false;
    doubleBalance = true;
    individualBalance  = false;
    groupBallance = false;
    verifiedBallance = true;
    blockedBallance = false;
    deletedBallance = false;
    unverifiedBallance = false;
    prepaidBallance = false;
...
    ballanceSelect: any[] = [{
        label: 'xxx',
        name: this.showName,
        inputName: 'showName',
        status: this.showName.status,
    }, {
        label: 'xxx',
        name: this.showEmail,
        inputName: 'showEmail',
        status: this.showEmail.status,
    }, {
        label: 'xxx',
        name: this.showMobilePhone,
        inputName: 'showMobilePhone',
        status: this.showMobilePhone.status,
    }, 
    ];
...

---

我的代码正在运行，但看起来并不漂亮，是否有办法创建额外的文件来存储我的变量、对象、数组等，以及如何将其与组件连接？

您可以在单独的文件中创建一个类来保存数据

export class BalanceData{
correctBalance = false;
wrongBalance = false;
extraBalance  = false;
administrator = false;
doubleBalance = true;
individualBalance  = false;
groupBallance = false;
verifiedBallance = true;
blockedBallance = false;
deletedBallance = false;
unverifiedBallance = false;
prepaidBallance = false;
}

您需要导入单独的文件

import { BalanceData} from '../balanceData.ts';

然后创建类的实例，而不是声明所有变量

data:BalanceData;

然后像这样访问变量

data.correctBalance

---

使用设置变量创建一个服务，也可以创建一个类来创建数据。这样你就不会污染控制器。然后将相似/相似的变量分组到一个对象中，以使这些变量美观且可读

这样可以减少你的VAR

PS这是一个关于你能做什么的粗略想法。我指的是想法，而不是确切的代码

  componentData = [];

    createList(): void { // could put this in a service
        const data = {
            list: [],
            items: [],  
            pageOfItems: []
        }
        this.componentData.push(data);
    }

    createList(); // make as many as you want

    componentData[id].list; // access like this instead of list3

---

按范围将变量分为类变量和局部变量。我们在C、JAVA等语言中使用模型类。您也可以在这里遵循相同的实践。为类级变量创建一个新类并将其导出。 它将帮助您在其他地方使用继承/聚合来维护和重用它