Angular使用cli生成自定义文件、组件的方法

Angular的CLI生成自定义文件与组件的神奇之旅

在长沙网络推广的世界里，我们一直在寻找高效、便捷的开发方式。对于Angular开发者来说，使用CLI生成自定义文件、组件已经成为了一种高效的工作流程。这种方法不仅能帮助我们快速创建文件和组件，还能减少重复性工作，提高开发效率。今天，就让我们一起跟随长沙网络推广的脚步，来看看如何使用Angular CLI生成自定义文件与组件。

在传统的开发过程中，我们通常通过复制粘贴的方式来创建新的组件。这种方式效率低下，容易出错。幸运的是，Angular CLI提供了脚手架功能，可以高效地创建模块和组件。它不仅可以创建文件，还能自动生成一些必要的代码，并将组件导入最近的模块。这对于开发者来说，无疑是一大福音。

当我们需要创建具有自定义后缀的组件时，该如何操作呢？答案是使用自定义原理图（Schematic）的方式来实现。Schematic是一个脚手架库，它定义了如何通过创建、修改、重构或移动文件和代码来生成或转换编程项目。Angular CLI通过原理图来生成和修改项目文件。库开发人员可以创建原理图，使CLI能够生成符合其规范的库文件。

在node_modules文件夹中，我们可以找到@Schematics/angular库，它包含了我们可以使用CLI生成的所有文件类型，包括组件（ponents）、类（class）、枚举（enum）和接口（interface）等。在ponents文件夹中，有一些TS文件和files文件夹。files文件夹里面包含了我们生成组件时所需要的模板文件。

为了满足我们项目的特殊需求，比如将页面和组件进行区分，我们可以自定义原理图。我们可以仿照ponents文件夹的结构，创建一个新的page文件夹，并在其中定义我们自己的文件模板。在page文件夹中，我们可以创建一个index.js文件来定义我们的自定义命令的行为。这个文件中的代码虽然有些复杂，但是其核心逻辑就是创建对应的组件文件和组件类。

通过自定义原理图的方式，我们可以轻松地创建具有自定义后缀的组件，提高开发效率。我们还可以根据需要定义更多的文件类型，以满足项目的特殊需求。这种方式不仅方便快捷，而且具有高度可定制性，是Angular开发者不可或缺的一项技能。

我们决定将所有的`.ponent`和`}Component`替换为`.page`和`}Page`，以更好地适应我们的新命名规则。

让我们首先更新路径和命名规则。以下是路径字符串的构建方式：

```javascript

const pagePath = `/${options.path}/`

+ (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')

+ core_1.strings.dasherize(options.name)

+ '.page';

const classifiedPageName = core_1.strings.classify(`${options.name}Page`);

```

接下来，我们要关注`page/files/__name@dasherize__.page.ts`文件。这是对生成的组件的ts模板的改造。由于我们已经将文件名改为XXX.page.ts，因此里面的类名也需要相应地改为XXXPage。并且，我们的页面不会作为指令出现，所以我们需要去掉selector元数据。下面是改造后的模板：

```typescript

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

@Component({

template: `

${dasherize(name)} works!

`,

styleUrls: ['./${dasherize(name)}.page.${styleext}']

})

export class ${classify(name)}Page implements OnInit {

constructor() {}

ngOnInit() {}

}

```

这个新的模板为我们的页面组件提供了清晰的结构。我们定义了组件的模板，样式表，以及实现了OnInit生命周期钩子。这样，我们就可以根据需求进一步扩展这个组件了。通过修改模板中的内容和样式，我们可以创建出功能丰富、样式独特的页面。这个新的命名规则也使得代码更加清晰，易于理解和维护。在我们深入改造Angular组件的过程中，我们的工作重点是对源代码的优化与整理。当前我们有一个名为 `__name@dasherize__.page.ts` 的文件，它正在等待我们的进一步修改和标准化处理。对于这段代码的修改，我们可以保持其原有的核心结构和功能，并添加必要的注解和修饰符以增强其可读性和可维护性。以下是修改后的代码示例：

```typescript

import { Component, OnInit } from '@angular/core'; // 引入必要的Angular核心模块

// 根据需求引入其他可能的修饰符和注解，例如ViewEncapsulation和ChangeDetectionStrategy等

// <% ... %> 为模板代码，将在实际项目中替换为实际的值，如组件名等

@Component({

selector: 'app-<%= name %>', // 定义组件的选择器

templateUrl: './<%= dasherize(name) %>.page.html', // 指定组件的HTML模板位置

<% if (!inlineStyle) { %>

styleUrls: ['./<%= dasherize(name) %>.page.<%= styleext %>'], // 指定组件样式表的位置

<% } %>

<% if (!!viewEncapsulation) { %>

encapsulation: ViewEncapsulation.<%= viewEncapsulation %>, // 设置视图封装策略

<% } if (changeDetection !== 'Default') { %>

changeDetection: ChangeDetectionStrategy.<%= changeDetection %> // 设置变更检测策略

<% } %>

})

export class <%= classify(name) %>Page implements OnInit { // 定义组件类并实现OnInit接口

constructor() { } // 组件的构造函数

ngOnInit() { } // 生命周期钩子函数ngOnInit的实现，用于初始化组件状态和行为

}

```

等等，我有个问题。在我的项目中，我使用的是less作为样式语言，并且在我用ponent创建的组件中的样式文件都是less格式的。为什么我们自定义生成的却是css文件呢？

这可能意味着我们的系统没有识别到我们自定义的less文件。那么，我们的less文件是如何定义的呢？我们可以在angular.json文件中的项目部分找到答案。

在"schematics"部分，我们可以看到"@schematics/angular:ponent"的子项中，"styleext"被设定为"less"。这意味着当我们生成ponent组件时，样式文件的扩展名将会是less。我们的page命令并没有进行这样的配置，所以系统可能会寻找默认的样式文件后缀。那么，我们可以尝试在这里进行配置，看看效果如何。

我们在"@schematics/angular:page"的子项中也设定"styleext"为"less"。保存并重新生成文件。

现在，让我们看看结果。系统为我们创建了以下文件：

在src/app/pages/user/user-test目录下，创建了user-test.page.less（0字节），user-test.page.html（28字节）和user-test.page.ts（240字节）。也更新了src/app/pages/user/user.module.ts文件（1804字节）。

以上就是我们今天的全部内容。希望这篇文章能够帮助大家更好地理解如何在Angular项目中使用less作为样式语言，并且能够在自定义生成组件时正确地配置样式文件的格式。也希望大家能够支持我们的狼蚁SEO。谢谢大家的阅读！

（注：以上文章内容纯属虚构，如有雷同，纯属巧合。）