跨组件使用静态变量答案

【问题标题】：Using static variable across components跨组件使用静态变量
【发布时间】：2017-07-13 01:57:50
【问题描述】：

我有一个数据存储 TypeScript 文件，其中包含几个字符串数组：

export const servicesData =
    [
        'test',
        'test',
    ];

export const surgeonsData =
    [
        'test',
        'test',
    ];

然后我有另一个组件，我一次实例化了多个。我想以静态方式使用数据存储数组，这样我就可以在所有实例中使用它们，而无需每次都读取。

这是我现在所拥有的快速摘要。每个预订组件都需要使用 data-model.ts 文件中的数组，而无需每次都重新读取。

import { surgeonsData, servicesData } from 'app/data-models.ts'

@Component({
    selector: 'booking',
    template:
        `
          <div *ngFor="let s of surgeons">
            {{s}}
          </div>
        `
})


export default class BookingComponent {

    surgeons = surgeonsData;
    services = servicesData;

    constructor() {}


}

所以在我上面的示例中，每次制作新组件时，都会将外科医生数据保存到外科医生变量中。我不想每次都这样做，每个组件都只能访问一个变量。

【问题讨论】：

你有什么问题？
我不想每次都这样做，每个组件都只能访问一个变量。 为什么？
@torazaburo 有很多组件，真正的数组相当大，这导致它运行非常缓慢。因为实际上没有必要在每次实例化时保存变量，因为数据永远不会改变，所以只有一个可以全局使用的副本是有意义的。见下文答案
您不是在“保存变量”，当然也不是在复制数组。您只是在创建从组件属性到全局值的单个引用。性能影响可以忽略不计。无论您可能遇到什么性能问题，它们都极不可能与在组件属性中保留指向全局值的指针有关。

标签： angular typescript

【解决方案1】：

使用服务来访问全局可用的静态变量。尝试在服务之外执行此操作会遇到分区和变更检测问题。

【讨论】：

为什么有必要这样做？
我的想法是，让它作为静态变量在所有组件实例中随时可用会比注入服务并每次都调用它更快？
@ScottMackenzie 这不是性能问题，而是简单性问题。
根据定义，服务是单例的，并且只会被实例化一次。也许你的问题是你是否可以对一个变量有一个单一的全局引用，但是当 Angular 编译时，情况就是这样。
在这种情况下，性能非常重要，因为一次可能有 50 个左右的这些组件。