angular2 템플릿에서 정적 함수 호출

angular2 템플릿에서 정적 함수 호출

저는 각진 프로젝트를 위한 '유틸리티' 서비스(클래스)를 구축하려고 합니다.유틸리티 클래스에는 정적 기능이 있으므로 불필요한 개체를 인스턴스화할 필요가 없습니다.한 가지 예는 다음과 같습니다.

import { Injectable } from '@angular/core';

@Injectable()
export class DateService {
   constructor() {
   }

   public static parseDate(dateString: string): Date {
       if (dateString) {
           return new Date(dateString);
       } else {
           return null;
       }
   }
}

구성 요소 클래스 파일에서 다음과 같이 가져옵니다.

import { DateService } from '../utilities/date.service';

다음과 같은 클래스 코드 내에서 작동합니다.

ngOnInit():void {
  let temp = DateService.parseDate("2012/07/30");
  console.log(temp);  // Mon Jul 30 2012 00:00:00 GMT-0500 (Central Daylight Time)
 }

하지만 저는 다음과 같이 각진 html 템플릿 내에서 이러한 유틸리티 기능을 사용할 수 있기를 원합니다.

<label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=DateService.parseDate($event.target.value)" name="date">

그러나 "정의되지 않은 속성 'parseDate'를 읽을 수 없습니다." 오류를 제공합니다.

이제 'parseDate' 함수를 구성 요소 클래스로 이동할 수 있습니다. 그러면 (템플릿에서 필요한 변경 사항이 있더라도) 잘 작동합니다.하지만, 만약 내가 많은 구성 요소를 가지고 있다면, 그들은 모두 그들만의 'parseDate' 기능을 가지고 있어야 할 것이고, 나는 그것이 잘 확장되지 않는 나쁜 생각이라는 것을 우리 모두가 알고 있다고 생각합니다. (parseDate 함수의 사소한 성질은 무시해 주세요)

또한 정적 기능을 실행하기 위해 개체를 인스턴스화하고 싶지는 않지만 실제 종속성 주입으로 시도합니다.공급자 배열에 이를 추가하고 생성자에 인스턴스를 구축하는 방법은 다음과 같습니다.

constructor(private _dateService: DateService) { }

템플릿을 다음으로 변경합니다.

label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=_dateService.parseDate($event.target.value)" name="date">

이 작업도 실패합니다. 이번에는 "self.context"가 있는 를 사용합니다._dateService.parseDate가 함수가 아닙니다." 오류입니다.기능에서 '정적'을 제거하면 문제가 해결되고 다음으로 넘어갈 수 있지만, 여전히 정적 기능을 실행하기 위해 무언가를 인스턴스화해야 합니다.확실히 더 좋은 방법이 있습니다.

생각은?

보기에서 구성 요소 클래스의 인스턴스 멤버만 호출할 수 있습니다.

정적 멤버를 호출하려면 구성 요소에 게터를 제공해야 합니다.

export class MyComponent {
  parseDate = DateService.parseDate;
}

그러면 당신은 그것을 사용할 수 있습니다.

(input)="event.date=parseDate($event.target.value)"

Gunter의 대답은 완벽하게 타당하고 제가 대부분 그것을 해왔던 방식입니다.

유형 스크립트를 사용하는 경우 구성요소가 정리되지 않은 상태로 유지되도록 보기에 기능을 제공하는 사용자 지정 장식기를 추가로 만들 수 있습니다.

예:

장식자 정의:

import {StaticClassFunctions} from "./static-class-functions"

export function CustomDecorator(): Function {
    return (target: Function): Function => {
        target.prototype.yourStaticMethod = (param1) => {
            return StaticClassFunctions.yourStaticMethod(param1);
        }
    }
}

장식기를 구성요소에 부착합니다.

@Component{ ... }
@CustomDecorator()
export class YourComponent { ... }

이제 구성요소에 선언할 필요 없이 뷰의 정적 기능에 액세스할 수 있습니다!뷰 형식 지정 등을 지원하는 반복적인 "유틸리티" 기능에 매우 유용합니다(예: 열거형 캐스팅!).

<span>{{yourStaticMethod(yourInput)}}</span>

그러나 컴파일할 수 있도록 맨 위에 함수를 선언하지 않으면 구성 요소에 액세스할 수 없습니다.

템플릿에 대한 클래스에 액세스할 수 있는 필드를 구성 요소에 선언할 수 있습니다.

export class YourComponent {
    public DateService= DateService;
}

Angular라는 .pipes은 Angular 1이라고 불렸습니다.filters.

Angular 서사정파의클이래프스만사다용다합니음을들에고를용을 합니다.|값을 전달할 템플릿에 있습니다.날짜에 대한 기본 제공 날짜가 있으며 다음과 같이 사용됩니다.

{{ "2017-01-24" | parseDate }}

물론 이 파이프가 사용자가 원하는 것을 수행하지 않는 경우에는 자신만의 파이프를 만들 수 있습니다.

@Pipe({
  name: 'parseDate'
})
export class ParseDate implements PipeTransform {

  transform(value: string): string {
    return DateService.parseDate(value);
  }
}

자세한 내용은 https://angular.io/docs/ts/latest/guide/pipes.html 을 참조하십시오.

한 번은 이런 식으로...

public get DateService(): typeof DateService {
    return DateService;
}

템플릿에서 다음과 같이 사용했습니다.

(input)="event.date=DateService.parseDate($event.target.value)"

기본적으로 @Sergey 버전이지만, 내가 그것을 반환한다는 것을 명확히 한 더 "TypeScripty" 게터의 형태입니다.type클래스의 정적 멤버가 템플릿에 노출됩니다.

제가 평소에 했던 방법은 다음과 같습니다.

public readonly DateService: typeof DateService = DateService;

및 템플릿:

(input)="event.date=DateService.parseDate($event.target.value)"

이렇게 하면 Getter를 만들 필요가 없고 템플릿에서 액세스할 수 있는 공용 변수만 만들 수 있습니다.

언급URL : https://stackoverflow.com/questions/41857047/call-static-function-from-angular2-template