从不同组件调用函数并传递参数

Question

当我需要处理一个日期时，我有一个函数调用了好几次:

dateFormat(myDate, format) {
let temp=this.datePipe.transform(myDate, format)
return(temp)
}

这只是格式化日期。

let niceDate=dateFormat(mydate, 'MM/dd/yyyy')

问题是我需要从几个组件调用它。我在看服务，看起来这不是我想要的(我可能错了)。我想知道这是否可以像在Node.js中一样完成，但在Angular中。

在一个文件中存储多个函数，导入该文件并从其他组件调用函数的正确方法是什么?

谢谢。

Answer 1

您可以创建常见的实用程序文件,您可以实现这些功能将是跨应用程序使用。现在您只需要将该文件导入任何组件并使用该静态函数。

为例:Utils.ts文件

export class Utils {
constructor() { }

dateFormat(myDate, format) {
let temp=this.datePipe.transform(myDate, format)
return(temp)
}
}

component.tsfile

import { Component, OnInit} from '@angular/core';
import { Utils } from 'src/app/shared/utils/utils';
export class TestComponent implements OnInit{

myDate = new Date();
format = 'MM/DD/YYYY'

constructor() { }

covnervtDate(){
return Utils.dateFormat(this.myDate, this.format);
}
}

Answer 2

如果您只是创建实用函数这并不依赖于你的应用程序的当前状态，然后你可以简单地从ts文件导出每个函数。

创建一个date.util.ts文件，并导出所有的函数

export function dateFormat(myDate, format) {
let temp=this.datePipe.transform(myDate, format)
return(temp)
}

现在你可以在你的组件文件中导入这个函数了:

import * as DateUtil from './utility/date.utils';
...
DateUtil.dateFormat()

为更好的文件夹结构,我通常与一个index.ts文件,创建一个实用程序文件夹出口所有的实用函数。优势-摇树． 所有未使用的函数都不会出现在最终的bundle中。

当你的函数修改应用程序的状态时:

如果您需要保存应用程序的状态/组件,您应该创建services并将其注入你的组件文件。在这里阅读更多关于创建服务的信息

Answer 3

在一个文件中存储多个函数，导入该文件并从其他组件调用这些函数的正确方法是service。

建议:

1. 使用Angular Service
2. 使用Angular日期管道->它可以定制多种
3. 如果您仍然坚持使用此功能，只需使用一行:return this.datePipe.transform(myDate, format)