Question

我使用角度4，这是我有提案列表组件的问题，我想使用来自npmjs for accounting-js和link documentation how to use the function的accounting-js，我使用

npm install accounting-js

这是我的proposal-list.component.ts

import { Component, OnInit } from '@angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
@Component({
  selector: 'app-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

我的问题如何在formatNumber.js中使用该函数？

我尝试在proposal-list.component.html

中使用

total money =   {{formatNumber(1000500.65)}}

但它没有显示，但没有错误信息。

问题的附加信息

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AlertModule } from 'ngx-bootstrap';
import { BsDropdownModule } from 'ngx-bootstrap';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AppRoutingModule } from './app-routing.module';
import { DocumentsComponent } from './documents/documents.component';
import { ProposalListComponent } from './proposal/proposal-list/proposal-list.component';
import { ProposalShowComponent } from './proposal/proposal-show/proposal-show.component';
import { ProposalNewComponent } from './proposal/proposal-new/proposal-new.component';


@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    DocumentsComponent,
    ProposalListComponent,
    ProposalShowComponent,
    ProposalNewComponent
  ],
  imports: [
    AlertModule.forRoot(),
    BsDropdownModule.forRoot(),
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

你应该在ts文件中执行它，如果你想在你的html中执行它，那么你必须在你的ts中定义一个函数。试试这个。

import { Component, OnInit } from '@angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
@Component({
  selector: 'app-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
private money: number ;
      constructor() { }
      ngOnInit() {
this.money = formatNumber(1000500.65)
      }
    }

并在你的HTML中

总金额= {{money}}

但是如果要动态使用它，可以使用FormatNumber函数

创建自定义管道

import { Pipe, PipeTransform } from '@angular/core';

import { formatNumber } from 'accounting-js/lib/formatNumber.js';

@Pipe({name: 'formatNumber'})
export class FormatNumberPipe implements PipeTransform {
    transform(money:number): number {
        return formatNumber(money)
    }
}

可以像

一样使用它

total money =   1000500.65 | formatNumber

<强>更新您必须将管道包含在AppModule的声明数组中。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { FormatNumberPipe} from './pipe.component';// whatever the name of your pipe component

    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      declarations: [
        AppComponent,
        FormatNumberPipe// **<-- this guy**
    ]

......

Answer 2

如果导入是一个问题，那么你需要考虑以下这些东西。

wat是你的js文件中的函数的导出类型，如UMD，AMD，es2015等
然后你需要了解哪些类型的模块在打字稿中以哪种方式导入。
导入模块/功能后，您可以通过打字稿

就像你可以导入开放函数import * as services from 'thisService' 但是如果该函数在模块内部，则需要从imort { service} from 'thisServiceModule'等模块中导入它。

希望有所帮助

如何在angular 4中使用导入的npm包中的js函数

问题的附加信息

2 个答案: