Angular 模板中的静态函数

Question

在我们的项目中，我们使用AirBnB的 linting-config 。这是一条规则，规定类方法必须使用静态方法this或声明为静态方法。从理论上讲，这条规则对我来说很有意义，但在角度背景下似乎会引起一些问题。想象一个像这样的组件（Stackblitz）：import { Component, VERSION } from '@angular/core';@Component({  selector: 'my-app',  template: '<p>{{doSomething("hello stack overflow")}}'})export class AppComponent  {  doSomething(string: string): string {    return string.toLocaleUpperCase();  }}现在，linter 会抱怨doSomething不使用它。Wen 现在可以使函数静态来满足它 - 但我们将无法在模板中使用该函数。一个结论是，它doSomething不应该是 AppComponent 的一部分，而应该是另一项服务的一部分。但是我们必须再次将静态函数包装在非静态函数中。最终，包装功能并不比原始功能小多少，因此整个外包给服务的事情似乎毫无意义。特别是因为我们谈到的函数明确仅对组件模板有用。这似乎是有问题的，特别是对于trackByof 的跟踪功能ngForOf- 它们本质上倾向于不使用this关键字并且仅在模板中使用，因此它们不能是静态的。请参阅从 angular2 模板调用静态函数那么是否存在一种有意义的模式来处理模板中与此规则一起使用的函数，或者它对于角度来说不是一个有用的规则？

Answer 1

您还可以在 .ts 外部函数中定义，例如：

export function myFunction(name){

   return "Hello "+name;

}

您只需要一个组件

import {myFunction} from './myfile.ts' 

然后就可以在.ts中使用

   myFunction("Me");

如果你想在 html 中使用，你需要在 .ts 中声明

  myFunctionI=myFunction;

并使用

  {{myFunctionI('me')}}

其他选项：你的 .ts 喜欢

export function Util() {

    return new UtilClass()

}

class UtilClass {

   greet(name){

       return "Hello "+name;

   }

}

你可以

import {Util} from './myfile-util.ts' 

console.log(Util.greet("me"))

Answer 2

我自己找到了一个令人满意的解决方案：

我转换这些函数 - 小，与 UI 相关，（仅）在模板中使用，不使用范围 ( this) 作为字段，持有箭头函数。

  doSomething = (string: string): string => string.toLocaleUpperCase();

Answer 3

对于你的情况，我认为管道更好。