如何在 angular 2 模板中使用导入的类、函数和变量

Question

我有一个解决导入静态内容并在模板中使用它的问题的方法，但我不确定它是否正确，所以我想听听是否有官方/更好的方法来做这件事。

这是示例，包含相关部分和我当前的解决方案。

常量.ts

export const ELEMENT_TYPES = { FIELD: {...}, GROUP: {...} ...};

组件.ts

import {ELEMENT_TYPES} from "./constants";

@Component({
   ...
   templateUrl:"./template.html"
})
export class myComponent{
   public type = ELEMENT_TYPES.GROUP;

   public get ELEMENT_TYPES() {
      return ELEMENT_TYPES;
   }

   public isOfType(matchType){
      return this.type === matchType;
   }
   ...
}

模板.html

<div *ngIf="isOfType(ELEMENT_TYPES.FIELD)">
   ...
</div>

当然在真正的实现中类型是从另一个地方设置的（它在通过输入发送下来的元数据对象中）

我担心的是使用与导入的常量名称相同的属性 getter 名称。但是如果我不创建 getter，我将无法访问模板中的常量。我想在模板中访问与组件类中同名的常量 ELEMENT_TYPES。

这个问题对于以这种方式导入的类、函数和变量是一样的。（例如，我们有静态库类（不是服务），有时需要从模板中使用）

当然，我对看待问题的另一种方式持开放态度，例如有没有更好的方法来打包常量和类（我们没有以这种方式导入的函数）以从模板和组件类访问它们通过同名。

Answer 1

我可以想到四种方法。我无法真正证明这一点，这是我的观点。也许其他人可以提供超越一个不必要的参考的见解。我会选择3或4个。

1.实例变量

import {ELEMENT_TYPES} from "./constants";

class MyComponent {
  readonly ElementTypes: typeof ELEMENT_TYPES = ELEMENT_TYPES;
}

<div *ngIf="isOfType(ElementTypes.FIELD)">
   ...
</div>

引用保持不变，但每个实例都有一个相同的变量，其中包含对导入的引用。

2.静态变量

import {ELEMENT_TYPES} from "./constants";

class MyComponent {
  private static readonly _ElementTypes: typeof ELEMENT_TYPES = ELEMENT_TYPES;
  get ElementTypes() {
    return MyComponent._ElementTypes;
  }
}

<div *ngIf="isOfType(ElementTypes.FIELD)">
   ...
</div>

对导入的引用现在是静态的，但您需要一个 getter 来访问它。这意味着你不妨使用

3.吸气剂

import {ELEMENT_TYPES} from "./constants";

class MyComponent {
  get ElementTypes() {
    return ELEMENT_TYPES;
  }
}

<div *ngIf="isOfType(ElementTypes.FIELD)">
   ...
</div>

任何地方都没有多余的引用，所有消费者代码都使用导入中的相同对象。

4. 将功能移至代码中

import {ELEMENT_TYPES} from "./constants";

class MyComponent {
  private elementType: ELEMENT_TYPE = ELEMENT_TYPE.FIELD;

  isOfTypeField() {
    return this.elementType === ELEMENT_TYPE.FIELD;
  }
}

<div *ngIf="isOfTypeField()">
   ...
</div>