如何使用 Angular 的 CLI 生成单文件组件？

Question

假设我需要一个非常小的 Angular 组件，因此最好的选择是单文件组件。

像下面这样的错误警报就是这样的一个例子：

@Component({
  selector: 'app-errors',
  template: `<div class="alert-error">{{ errorMessage }}</div>`,
  styles: [
    `
    .alert-error {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 0.25rem;
    }
    `,
  ],
})
export class ErrorsComponent {}

为了制作这个组件，我在 CLI 中运行了

ng g c error-alert

。然后我删除了 CLI 生成的所有文件除了

error-alert.ts

。然后我将其移到 error-alert 目录之外（我已将其删除）。

问题

我希望（现在仍然如此）有一种更简单、更快的方法来制作单文件组件。

问题

1. 是否有可以生成单文件组件的 CLI 命令？
2. 如果没有这样的命令，我们可以配置CLI使其有吗？怎么办？

Answer 1

您可以尝试添加一些标志，如下所示。

> ng generate component <component-name> --inlineTemplate=true --inlineStyle=true --skip-tests=true

这应该会停止生成 css/html/spec 文件。

现在在更现代的版本上还可以选择对独立组件执行相同的操作。

--standalone

可以在 Angular CLI 文档中找到有关特定目标生成的更多选项。

如果您想更进一步，您还可以在

schematics

中编辑

angular.json

对象，以在生成组件时将这些标志设置为默认值。

  "schematics": {
    "@schematics/angular": {
      "component": {
        "inlineTemplate": true
      }
    }
  }

Answer 2

您可以添加一项新配置，使

ng g component

只生成一个ts和spec文件。

在

angular.json

中，在“sematics”属性下添加以下内容：

"schematics": {
  "@schematics/angular:component": {
    "inlineStyle": true,
    "inlineTemplate": true
   }
}

此外，您还可以使用扩展来获得 CSS 和 HTML 语法突出显示。这是一个 - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

在 Angular 中创建单个文件组件的更深入教程 - https://muhimasri.com/blogs/how-to-create-a-single-file-component-in-angular/