最终的

角

使用预定义模板创建组件

IntelliJ IDEA 提供了用于创建 Angular 组件的预定义实时模板，例如a-component和。有关实时模板的更多信息，请参阅实时模板。a-component-inlinea-component-root

要查看预定义模板的完整列表，请打开“设置”对话框 ( )，然后转至编辑器 |实时模板，然后展开Angular节点。CtrlAlt0S

1. 在编辑器中，按，从列表中选择适当的模板（例如），然后按。Ctrl0Ja-componentEnter

2. IntelliJ IDEA 生成一个组件存储根，将插入符号放在保存的字段中，然后等待您在此处指定组件名称。当您输入组件名称时，选择器的名称和模板 URL 会根据Angular 样式指南自动填充。

动图

通过在 WebStorm 博客中使用和创建代码片段了解如何使用戒指自定义模板。

创建组件文件夹

在 IntelliJ IDEA 中，您可以通过一个操作为 Angular 组件创建多个文件，您甚至可以将它们全部放在一个单独的文件夹中。因此，您需要使用标记多个子模板的文件模板。父模板创建文件时，子模板中的相关文件会自动生成。有关更多信息，请参见多个文件的模板。

假设您要创建一个包含一系列组件文件的示例文件夹，例如用于逻辑的example.component.ts、用于模板的example.component.html以及用于样式的example.component.css。您可以创建一个包含两个父模板的文件模板，以便同时生成所有三个文件并将其放置在单独的文件夹中。

1. 在“设置”对话框 ( ) 中，选择编辑器|文件和代码模板。CtrlAlt0S

2. 首先为 TypeScript 组件文件创建一个模板：

   1. 在“文件”选项卡中，单击工具栏上的“添加”按钮( )。新的未命名模板将添加到列表中。

   2. 至少在其中，指定模板名称，将其设置为Angular Component，并将其component.ts文件扩展名。

   3. 在文件名字段中，输入$NAME/$NAME。

   4. （任选）添加代码模板，例如：

      ** * 由 ${USER} 在 ${DATE} 创建 */ import { Component } from '@angular/core';                           

   

   单击“应用”。

3. 为相关HTML文件创建子模板：

   1. 选择Angular Component父模板，然后单击工具栏上的“创建子模板文件”按钮。在 Angular Component模板下方添加一个子模板。

   2. 在右边其中，输入$NAME/$NAME文件名字段并指定component.html扩展名。

   

   单击“应用”。

4. 为相关样式表创建子模板。

   1. 选择Angular Component模板，然后单击工具栏上的。在Angular Component模板下方添加了一个子模板。

   2. 在右边其中，输入$NAME/$NAME文件名字段并指定component.css扩展名。

5. 单击“确定”保存模板。

6. 创建组件文件。

   从要存储组件文件的文件夹的上下文菜单中，选择新建|角度最小值。在打开的对话框中，指定将用于其文件夹中的组件文件的名称（本例中的示例）。

   

   动图

从模板中取出组件

Extract Angular 组件重构通过运行 来进行ng generate component，并考虑angular.json文件中的原理图首选项。

1. 在 HTML 模板文件中，选择要提取到 Angular 组件中的代码片段。

2. 从选择的上下文菜单中，选择“重构”|“重构”。提取组件。

   或者，按并从“重构此”弹出窗口中选择“提取组件”。CtrlAltShift0T

3. 在打开的对话框中，指定新组件的名称。

1. 要调用包含相关文件列表的相关符号弹出窗口，请执行以下操作之一：

   • 按。CtrlAltHome

   • 选择导航 | 主菜单中的相关符号。

   • 右键单击编辑器中的任意区域，然后选择转到 | 相关符号。

   在 TypeScript 组件文件中，弹出窗口还列出了导入到该文件中的所有符号。

   

2. 要打开文件，请选择该文件并按。或者，使用与每种文件类型关联的编号：Enter

   1. 带有组件类的 TypeScript 文件

   2. 模板

   3. 测试

   4. 风格

1. 选择文件 | 从主菜单中新建或按Project工具窗口中的，然后选择Angular Dependency。AltInsert

2. 从列表中选择要添加的库。该列表显示了可以肯定安装的库ng add。要安装不在列表中的软件包，请滚动到其末尾并双击“安装上面未列出的软件包”链接，然后在打开的对话框中指定软件包名称。

   提示

   ng add可以在GitHub上找到可以安装的软件包列表。

   下面的示例说明了如何将 Angular Material 添加到项目中。

   

   动图

1. 选择文件 | 从主菜单中新建或按Project工具窗口中的，然后选择Angular Schematic。AltInsert

2. 从列表中选择相关原理图。

   

3. 在打开的对话框中，指定要生成的原理图的名称以及其他选项（如有必要）。IntelliJ IDEA 显示原理图的描述，并提供代码完成和可用选项的描述。

   

配置参数提示

1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

2. 展开参数名称下的Angular HTML 模板。

3. 通过选择相应的复选框来指定要显示参数提示的上下文。

   预览显示您在设置中所做的更改如何影响代码外观。

4. 对于某些方法和函数，IntelliJ IDEA 不会在任何上下文中显示参数提示。单击排除列表...查看这些方法和函数，可能为它们启用参数提示，或将新项目添加到列表中。

5. 要隐藏任何上下文中任何值类型的参数提示，请清除参数名称下的Angular HTML 模板复选框。

查看 Angular 特定检查的列表并配置它们

1. 在“设置”对话框 ( ) 中，转到编辑器 | 检查。CtrlAlt0S

2. 展开角度节点。

3. 配置检查配置文件和严重性、禁用和抑制预定义检查，以及创建自定义检查，如代码检查中所述。

安装角材料

• 在嵌入式终端( ) 中，键入：AltF12

  • ng add @angular/material适用于 Angular CLI 版本 6 及更高版本

  • npm install --save @angular/material对于早期版本的 Angular CLI

  从Angular Material 官方网站上的入门了解更多信息。

1. 在“设置”对话框 ( ) 中，转到编辑器 | 配色方案| 角度模板。CtrlAlt0S

2. 选择颜色方案，接受从默认值继承的突出显示设置，或按照颜色和字体中所述自定义它们。

1. 从工具栏上的列表中选择Angular CLI Server运行配置，然后单击列表旁边的 。

   npm start或者，在Terminal 中运行，或双击npm 工具窗口( View | Tool Windows | npm )中的任务，或单击package.json中脚本旁边的装订线。AltF12startstart

2. 等待应用程序编译完成并且 Webpack 开发服务器准备就绪。

   运行工具窗口或终端显示应用程序运行的 URL，默认情况下为http ://localhost:4200 /。单击此链接可查看该应用程序。

   

调试使用 Angular CLI 创建的应用程序

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且开发服务器准备就绪。

3. 从列表中选择自动生成的Angular 应用程序配置，然后单击列表旁边的“调试”按钮。

   

   动图

调试在本地主机上运行的应用程序

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且开发服务器准备就绪。

3. 运行工具窗口或终端显示应用程序运行的 URL，情况下为http ://localhost:4200/。按住并单击此 URL 链接。IntelliJ IDEA 使用自动生成的 JavaScript 调试类型的Angular 应用程序配置默认启动调试会话。CtrlShift

   

   动图

在自定义 URL 上运行的应用程序进行调试

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且Webpack开发服务器准备就绪。

3. 运行工具窗口或终端显示应用程序正在运行的URL。复制此URL地址，稍后您将在调试配置中指定它。要查看您的申请，只需单击链接即可。

4. 创建JavaScript调试配置。然后，请转到“运行”|“主菜单上的“编辑配置”，单击，然后从列表中选择“JavaScript调试”。在“运行/调试配置：JavaScript调试”对话框箱子，将保存的URL粘贴到URL字段中并保存配置。

5. 要启动新创建的配置，请从配置列表中选择它，然后单击列表旁边的。