Question

A有一个Angular 7多模块应用程序，其实用程序名称空间如下：

export namespace Utils {

  export function util1 (arg: type) {
  }

  export function util2 (arg: type) {
  }

  ...

}

上面的一些功能用于模板中，有些则不使用。

从我的研究中我发现，公开用于模板的方法的最佳方法是使用服务。问题是：除了将每个功能包装在服务中之外，我不知道该怎么做。

正确的方法是什么？

更新

这是我在模板内部使用的实用程序功能的示例（基本上，它重置p-table的第一条记录，然后应用过滤器）：

  function filter(table, value, field, filterMatchMode): void {
    table.first = 0;
    table.filter(value, field, filterMatchMode);
  }

在模板中：

<input *ngSwitchCase="'name'" pInputText type="text" (input)="utils.filter(table, $event.target.value, col.field, col.filterMatchMode)">

Answer 1

在命令行中执行以下操作：

ng generate service utils

然后，如果它在生成的代码@Injectable({providedIn: 'root'})中表示，则意味着您不需要将服务添加到providers数组，只需像往常一样将其注入到组件的构造函数中就可以开始使用它了版本提供了root权限-如果您没有此功能，则需要将服务添加到相关模块中的providers数组中。

然后在组件的ts文件中，可以通过将服务公开来将整个服务公开给模板：

constructor(public utilsService: UtilsService) {}

然后，您可以按如下所示在HTML模板中访问utils方法：

{{ utilsService.util1(arg) }}

或者如果您只想公开单个方法：

public util1

constructor(private utilsService: UtilsService) {
  this.util1 = utilsService.util1
}

然后，您可以按如下所示在HTML模板中访问utils方法：

{{ util1(arg) }}

也建议使用TypeScript的getter和setter（可能要记住），但这超出了您的问题。

还值得一提的是，如果Utils不使用任何其他Angular服务（并且永远不会），您可以将TypeScript类导入到.ts文件中，而避免完全使用服务-我倾向于对简单的字符串utils方法执行此操作等等。耶稣统治：）

如何通过服务公开一堆实用程序功能

1 个答案: