Статические функции в Angular-шаблоне

В нашем проекте мы используем linting-config от AirBnB. Есть правило, согласно которому методы класса должны использовать this или быть объявлены как статические. Теоретически это правило имеет для меня большой смысл, но в контексте angular, похоже, вызывает некоторые проблемы. Представьте себе такой компонент (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();
  }
}

Теперь линтер будет жаловаться на то, что doSomething не использует это. Теперь мы можем сделать функцию статической, чтобы удовлетворить ее требования, но тогда мы не сможем использовать функцию в шаблоне.

Одним из выводов может быть то, что doSomething не должен быть частью AppComponent, а, например, другой службой. Но тогда нам придется снова обернуть статическую функцию в нестатическую. В конце концов, функция упаковки не намного меньше исходной, поэтому весь аутсорсинг для обслуживания кажется бессмысленным. Тем более, что мы говорим о функциях, которые явно полезны только для шаблона компонента. Это кажется проблематичным, особенно с функцией отслеживания для trackBy из ngForOf - они, как правило, не используют ключевое слово this по своей природе и используются только в шаблоне, поэтому они не могут быть статическими.

Итак, существует ли значимый шаблон, как обрабатывать функции, которые используются в шаблонах вместе с этим правилом, или это просто бесполезное правило для angular?


typescript javascript angular
person Paflow    schedule 02.12.2020    source источник
comment
Я бы сказал, что вы можете использовать каналы Angular (angular.io/guide/pipes) для этих данных шаблона. функции преобразования. На самом деле вы можете использовать их и в trackBy (bennadel.com/blog/). Но тогда линтер будет жаловаться на каналы. Так как каналы являются важной частью Angular, я бы сказал, что, возможно, это правило не подходит для Angular (если только вы не можете исключить из него каналы).   -  person Javi    schedule 03.12.2020

Ответы (3)


arrow_upward
0
arrow_downward

Я сам нашел удовлетворительное решение:

Я конвертирую эти функции - маленькие, связанные с пользовательским интерфейсом, используемые (только) в шаблоне, не использующие область (this) в качестве полей, содержащие функции стрелок.

  doSomething = (string: string): string => string.toLocaleUpperCase();
person Paflow    schedule 04.12.2020

arrow_upward
0
arrow_downward

вы также можете определить внешние функции .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"))
person Eliseo    schedule 04.12.2020
comment
Но для их использования в шаблоне (часть html компонента) мне пришлось бы обернуть их в некоторые функции-члены компонента. - person Paflow; 04.12.2020
comment
@Paflow, в html все переменные относятся к this. например вы не можете не использовать напрямую в .html {{Math.round(3.2)}}. Но вы можете объявить в своем компоненте IMath=Math, а затем использовать {{IMath.round(3.2)}} -Мне нравится добавлять I перед переменной, но это только личная опция-. Равен другой функции или классу, который вы хотите использовать. - person Eliseo; 05.12.2020

arrow_upward
0
arrow_downward

В вашем случае, я думаю, труба лучше.

person KingMario    schedule 10.06.2021