Question

我想创建一个可以在角度模板中使用的可重用函数。我创建了一个函数：

 export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

我试图像这样添加到模板中：

<p> stringSplit('hello/user') </p>

但是我收到了这个错误：

ERROR TypeError: _co.stringSplit is not a function

我不确定如何在角度中创建和使用全局函数。

我们能以角度执行此操作吗？

在这种情况下，最佳解决方案是什么？

Answer 1

答案是你不应该。依赖注入是Angular提供的一个功能强大的工具，其唯一目的是在不维护全局范围的情况下跨组件共享功能。你应该做的是创建一个服务，向它添加一个方法，将你的服务注入任何需要它的组件，然后在那里调用它。

根据你的问题判断一个管道来执行你需要的操作会很好。管道用于操纵任何模板内的数据（使该功能对属于属于模块的所有模板实际上是全局的，这些模块可以声明或导入管道）。你可以这样写：

@Pipe({name: 'splitString'})
export class SplitString implements PipeTransform {
  transform(value: string, separator: string): string[] {
     return value.split(separator);   
  }
}

在你的HTML中：

<p>{{ myString | splitString : ',' }} </p>

阅读有关管道here的更多信息。

Answer 2

一般来说，这被认为是一种不好的做法但是，如果必须使用此全局函数，则只需将其添加为组件内的成员即可。代码中的某处：

export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

在您的组件中：

import {stringSplit} from '....'
...
class MyComponent {
  public stringSplit = stringSplit;
}

然后在模板中：

<p> stringSplit('hello/user') </p>

但正如我已经提到的，这是一种不好的做法。请考虑使用服务/管道。

Answer 3

全局功能不能也不应该在模板中使用。如果需要在模板中使用stringSplit，则必须是组件属性。继承可用于使其在多个组件中可用并使它们保持干燥状态：

abstract class BaseComponent {
  stringSplit(...) { ... }
}

@Component(...)
class FooComponent extends BaseComponent { ... }

这样做的正确方法是使stringSplit成为管道，因为这就是管道的用途。 stringSplit是纯函数，纯管道（默认）允许在管道输入未更改且管道输出预期相同时跳过更改检测，例如{{ 'foo' | stringSplit }}。虽然{{ stringSplit('foo') }}将在每个更改检测周期执行辅助函数。

创建一个可用于角度4模板的全局函数

3 个答案: