我想创建一个可以在 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 执行这个操作吗？
在这种情况下最好的解决方案是什么？
最佳答案
答案是您不应该。依赖注入(inject)是 Angular 提供的一个强大的工具，其唯一目的是在不维护全局范围的情况下跨组件共享功能。你真正应该做的是创建一个服务，向它添加一个方法，将你的服务注入(inject)任何需要它的组件，然后在那里调用它。
根据您的问题判断，最好有一个管道来执行您需要的操作。管道用于操作任何模板内的数据(使该函数对于属于声明或导入管道的模块的组件的所有模板几乎是全局的)。你可以这样写:
@Pipe({name: 'splitString'})
export class SplitString implements PipeTransform {
transform(value: string, separator: string): string[] {
return value.split(separator);
}
}
在你的 html 中:
<p>{{ myString | splitString : ',' }} </p>
阅读更多关于管道的信息 here .
关于angular - 创建一个可以在 Angular 4 模板中使用的全局函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47410452/