创建一个全局函数，可在Angular 4模板中使用。

Question

我想创建一个可在Angular模板中使用的可重用函数。我已经创建了以下函数:

 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

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

我们能在Angular中执行这个操作吗？

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

- PaladiN

---

有一个全局的 @Injectable 服务，可以在那里使用其中的方法。 - Aravind

创建一个服务，使用@Injectable({ providedIn: 'root' })。然后在其中添加方法。现在在所需的组件中导入该服务，以便您可以使用这些方法。 - suhailvs

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>

了解更多有关管道的内容，请点击这里。

- Armen Vardanyan

---

我知道管道的存在，但我正在寻找除了管道之外的其他方法。因为在使用管道进行转换之前，我需要进行一些操作。 - PaladiN

您可以结合使用管道。 - Armen Vardanyan

那么，如何在模板中组合管道而无需使用其他自定义管道呢？ - PaladiN

@PaladiN 看起来你遇到了 XY 问题。如果合并管道是一个真正的问题，那么应该在问题中进行说明。你可以像这样组合管道 {{ 'foo' | splitString | bar | baz }}。这就是为什么它们被称为管道。 - Estus Flask

@estus 我也在做同样的事情，但我把管道符号加到了错误的位置。不管怎样，谢谢。 - PaladiN

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>

但正如我之前提到的，这是一种不良的实践。考虑使用服务/管道替代。

- JeB

Answer 3

全局函数不能在模板中使用，也不应该被使用。如果需要在模板中使用stringSplit，它必须是组件属性。可以使用继承使其在多个组件中可用且保持DRY：

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

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

正确的做法是将stringSplit作为一个管道，因为这就是管道的用途。 stringSplit是一种纯函数，而纯管道（默认值）允许在管道输入不变且期望管道输出相同时跳过变化检测，例如{{ 'foo' | stringSplit }}。而{{ stringSplit('foo') }}将在每次变化检测周期中执行帮助函数。

- Estus Flask