安裝了 npm package 但在瀏覽器中出現“不是函數”錯誤

Question

我正在使用Ionic 4並嘗試使用這個庫： https://date-fns.org來獲取像2019-11-01 07:23:22這樣的日期字符串，以便以人類可讀的方式顯示。

所以我安裝了lib：

npm install date-fns --save

然后在mypage.ts文件中

import { format, formatDistance, parseISO } from 'date-fns';

然后在mypage.html文件中

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

所以我在瀏覽器控制台中收到此錯誤：

ERROR TypeError: _co.parseISO is not a function

它說 function 不存在，但它在文檔中： https://date-fns.org/v2.6.0/docs/parseISO

難道我做錯了什么？

Answer 1

在 TS 文件中：

import { format, formatDistance, parseISO } from 'date-fns';

constructor(public formatDistance: formatDistance) {
}

這是 HTML

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

Answer 2

只能從視圖調用組件 class 的實例成員。

https://stackoverflow.com/a/41857120/7562674

在 Ts 文件中：-

import { Component } from '@angular/core';
import { format, formatDistance, parseISO } from 'date-fns';

export class AppComponent implements OnInit {

formatDistance=formatDistance;
parseISO=parseISO;  
date=  "2018-10-01";
d=new Date(2015, 0, 1)
constructor(){
  console.log(formatDistance(parseISO("2018-10-01"), new Date(2015, 0, 
  1)))
  }

在模板中：-

  <p>{{formatDistance(parseISO(date),d)}}</p>

我檢查了這是有效的。

聲明為變量並分配它而不是注入構造函數參數。 由於它是 function 而不是 class，為什么在構造函數中使用時顯示錯誤不是類型。