typescript 创建一个可以在 angular 4 模板中使用的全局函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47410452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create a global function that could be used in angular 4 template
提问by PaladiN
I want to create a reusable function that could be used in angular templates. I have created a function as:
我想创建一个可在角度模板中使用的可重用函数。我创建了一个函数：
export function stringSplit(string : string, separator : string = '/') : any {
return string.split(separator);
}
I have tried to add into the template like this:
我试图像这样添加到模板中：
<p> stringSplit('hello/user') </p>
But i am getting this error:
但我收到此错误：
ERROR TypeError: _co.stringSplit is not a function
I am not sure how we can create and use global functions in angular.
我不确定我们如何在 angular 中创建和使用全局函数。
Can we perform this operation in angular?
我们可以在 angular 中执行这个操作吗？
What is the best solution in this situation?
在这种情况下最好的解决方案是什么？
回答by Armen Vardanyan
The answer is you should not. Dependency Injection is a powerful tool provided by Angular with the sole purpose of sharing functionality across components without maintaining a global scope. What you should really do is create a service, add a method to it, inject your service into any component that needs it, and invoke it there.
答案是你不应该。依赖注入是 Angular 提供的强大工具，其唯一目的是在不维护全局范围的情况下跨组件共享功能。你真正应该做的是创建一个服务，向它添加一个方法，将你的服务注入到任何需要它的组件中，然后在那里调用它。
Judging by your question it would be nice to have a pipe to perform the operation you need. Pipes are used to manipulate data inside any template (making the function virtually global to all templates that belong to components that belong to modules which either declare or import the pipe). You can write this:
从你的问题来看，有一个管道来执行你需要的操作会很好。管道用于操作任何模板内的数据（使该函数对于属于声明或导入管道的模块的组件的所有模板实际上是全局的）。你可以这样写：
@Pipe({name: 'splitString'})
export class SplitString implements PipeTransform {
transform(value: string, separator: string): string[] {
return value.split(separator);
}
}
And in your html:
在你的 html 中：
<p>{{ myString | splitString : ',' }} </p>
Read more about pipes here.
在此处阅读有关管道的更多信息。
回答by JeB
In general it is considered a bad practice.
But if you have to use this global function you can just add it as a member inside your component.
Somewhere in the code:
一般来说，这被认为是一种不好的做法。
但是如果你必须使用这个全局函数，你可以将它作为一个成员添加到你的组件中。代码中的某处：
export function stringSplit(string : string, separator : string = '/') : any {
return string.split(separator);
}
In your component:
在您的组件中：
import {stringSplit} from '....'
...
class MyComponent {
public stringSplit = stringSplit;
}
Then in template:
然后在模板中：
<p> stringSplit('hello/user') </p>
But as I already mentioned it is a bad practice. Consider using service/pipe instead.
但正如我已经提到的，这是一种不好的做法。考虑改用服务/管道。
回答by Estus Flask
Global functions cannot and shouldn't be used in templates. If stringSplitneeds to be used in template, it has to be component property. Inheritance can be used to make it available in multiple components and keep them DRY:
全局函数不能也不应该在模板中使用。如果stringSplit需要在模板中使用，它必须是组件属性。继承可用于使其在多个组件中可用并保持干燥：
abstract class BaseComponent {
stringSplit(...) { ... }
}
@Component(...)
class FooComponent extends BaseComponent { ... }
And the proper way to do this is to make stringSplita pipe, because this is what pipes are for. stringSplitis pure function, and pure pipe(default) allows to skip change detection when pipe inputs are unchanged and pipe output is expected to be the same, e.g. {{ 'foo' | stringSplit }}. While {{ stringSplit('foo') }}will execute a helper function on each change detection cycle.
正确的方法是制作stringSplit一个管道，因为这就是管道的用途。stringSplit是纯函数，纯管道（默认）允许在管道输入不变且管道输出预期相同时跳过更改检测，例如{{ 'foo' | stringSplit }}。While{{ stringSplit('foo') }}将在每个变更检测周期执行一个辅助函数。
