Question

我的应用程序中有一些简单的“纯”实用程序功能，我希望将其保存在一个地方。问题是，我可以使用以下方法在我的组件中导入它们：

import { utilities } from '../shared/utilities'

但是这些实用程序函数/方法在我的模板文件中不可用（因为它们仅绑定到组件类）。我必须在我的组件中创建这些函数的别名才能使用它们。有更好的方法吗？

Answer 1

我认为如果将其注入控制器，您应该能够使用模板中的实用程序。像这样：

import { Utilities } from './shared/utils';

@Component({
    ....
    ....
})
export class ExampleComponent {
    constructor(public util: Utilities) { }
}

在您的模板中，您应该可以使用util.your_function

更新

export class ExampleComponent {
    constructor(public util: Utilities) { }

    get staticMethod1() { return Utilities.staticMethod1(); }
}

Answer 2

@Vinit Sarvade上面建议的

解决方案似乎更像是 hack ，而不是好的方法。

背景信息：组件/指令是构件。在“组件”中，HTML是负责表示（即如何表示）的视图，而TS是负责表示什么的逻辑。

HTML部分已绑定到其关联的TS文件。逻辑上相互连接的TS文件。此外，即使是组件，也可以分为智能/容器组件（他们完全了解数据，服务等）和哑/虚拟组件（它们仅显示给定数据并转发用户响应）。

在这种系统下，所有逻辑都只能存在于关联的TS文件中，而不能存在于HTML中。但是，如果需要，请使用管道。

PIPE：：当我们需要直接在HTML中进行转换时，使用管道来转换数据。我们还可以组合多个管道，因为它们是理想的纯无状态函数。

示例：

定义

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'square'})
export class squarePipe implements PipeTransform {
  transform(value: number): number {
    return value*value;
  }
}

用法

{{  happiness | square }}

不要忘记导入模块。有关更多信息，请检查angular.io

注意：以正确的方法解决问题应该是我们的首要任务。

在模板中可用的角度2中保留实用程序功能的位置

2 个答案: