javascript - Importera generiska JS-funktioner till Angular-modul

Lite av en nybörjare på Angular/Typescript här.

Jag har satt upp ett JavaScript-bibliotek av exporterade hjälpfunktioner som jag nu vill importera till Angular-komponenter och använda i dessa komponenters .html-mallfiler.

Här är mitt Javascript-bibliotek, template-functions/data-types.ts:

export const isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;

Det är en enkel pilfunktion som jag exporterar:

Här är hur jag importerar det i min komponent:

import { Component, OnInit, Input } from '@angular/core';
import { MyModel } from '../model/my-model';
import { isNumeric } from '../template-functions/data-types';

@Component({
  selector: 'my-module',
  templateUrl: './my-module.html'
})

export class MyModule implements OnInit {

  @Input() public mymodeldetails: MyModel;

  constructor() { }

  ngOnInit() { }

  // isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
}

Detta är efter flera timmar av att ha Angular-kompilatorn och VSCode som säger åt mig att de inte kunde hitta data-types-modulen, även om sökvägen var korrekt. Jag hade en .js-filändelse istället för en .ts!

Så nu kan Angular se min isNumeric-funktion, men jag gör det .html-mallfilen ser den inte med det jag har gjort hittills. Webbläsaren ger felet "_co.isNumeric är inte en funktion".

Vad mer behöver jag göra för att få min Angular-mall att se min importerade funktion?

Jag använder Angular 6.

Svar #1

För att göra det synligt i mallen, omslut det i en komponentmetod:

import { isNumeric } from '../template-functions/data-types';

export class MyComponent implements OnInit {

  isNumeric(val: any): boolean {
    return isNumeric(val);
  }
}

Se denna stackblitz för en demo.

Som förklaras i dokumentationen för Angulars templatesyntax:

Uttryckskontexten är vanligtvis komponent-instansen. (...) Malluttryck kan inte referera till något i det globala namnområdet (förutom undefined). De kan inte referera till window eller document. De kan inte anropa console.log eller Math.max. De är begränsade till att referera till medlemmar i uttryckskontexten.

Svar #2

För framtida läsare:

För att använda en importerad funktion i mallen, tilldela den till en egenskap.

import { isNumeric } from '../template-functions/data-types';

export class MyComponent implements OnInit {

    isNumeric = isNumeric;
}

Relaterade artiklar