编写 Angular 原理图模板时，“小写”的辅助函数是什么？答案

【问题标题】：What is the helper function for "lowercase" when writing an Angular schematic template?编写 Angular 原理图模板时，“小写”的辅助函数是什么？
【发布时间】：2019-10-04 12:45:08
【问题描述】：

我正在按照tutorial here 构建一个简单的角度示意图模板。一切顺利。本教程使用辅助函数 (dasherize) 将文件名从 AwesomeWrap 转换为 hello-awesome-wrap。

hello-__name@dasherize__

我想在我自己的实现中更改此功能，以确保文件名是小写，所以AwesomeWrap 应该是awesomewrap。

这个功能似乎没有很好的文档记录（或者我找不到），我找不到可用功能的列表。我尝试创建一个文件view-__name@lowercase__.ts，但lowercase 似乎没有可用的功能。

当我运行 schematics .:sensor --name=test 时，我收到错误消息：

错误：管道“小写”未定义。

那么正确的语法是什么？是否有可以以这种方式执行的可用转换列表？

【问题讨论】：

标签： angular typescript angular-cli angular-schematics

【解决方案1】：

Angular Schematics Devkit 包中目前没有lowercase。

您可以在此处查看所有支持的功能：https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/core/src/utils/strings.ts

如果您需要小写函数，您可以为此文件打开一个 Pull Request 并添加它。

【讨论】：

【解决方案2】：

我只能想象他们将dasherize__ 转换为require('dasherize')(__)。其中__ 显然是文件名。 Soo，我想我们需要为你找到一个小写的包：

npm install lower-case

我猜你可以这样使用：

view-__name@lower-case__.ts

【讨论】：

如果有帮助，添加错误消息。它似乎在寻找一个管道，但小写是正确的管道，所以我不确定我错过了什么
@Liam Aw，不幸的是！值得一试：D。不过，应该有一种方法来扩展 angular devkit。否则我相信它是相当有限的
是的，这很有意义。我可能只是提交一个 PR，这似乎是一个明显缺失的功能，并且实现起来非常简单

【解决方案3】：

抱歉回复晚了。

在您的模板文件（例如：./files/__name@dasherize__.component.ts）文件中只需使用string.toLowerCase()

import { Component } from '@angular/core';

@Component({
  selector: "<%= name.toLowerCase() %>",
  template: `
  `,
})
export class <%= classify(name)%>Component {

}

如果你想像 dasherize 一样使用它，请转到 index.ts

export function mySchematics(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files');

    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ..._options,
        ...strings,
        tolowercase
      })
    ]);

    return mergeWith(sourceParametrizedTemplates)(tree, _context);
  };
}

export function tolowercase(value: string): string {
  return value.toLowerCase();
}

然后你可以在文件夹或文件名中使用like：

__name@tolowercase__component.ts

也可以在这样的模板中使用

import { Component } from '@angular/core';

@Component({
  selector: "<%= tolowercase(name) %>",
  template: `
  `,
})
export class <%= classify(name)%>Component {

}

【讨论】：