角

使用预定义模板创建组件

WebStorm 提供了用于创建 Angular 组件的预定义实时模板，例如a-component、a-component-inline和a-component-root. 有关详细信息，请参阅实时模板。

要查看预定义模板的完整列表，请打开设置/首选项对话框 ( Ctrl+Alt+S)，转到编辑器 | Live Templates，然后展开Angular节点。

1. 在编辑器中，按Ctrl+J，从列表中选择适当的模板（例如，a-component），然后按Enter。

2. WebStorm 生成一个组件存根，将插入符号放在带有画布的字段中，并等待您在那里指定组件名称。当您键入组件名称时，选择器的名称和模板 URL 会根据Angular Style Guide自动填写。

从WebStorm 博客中的使用和创建代码片段了解如何使用变量自定义模板。

创建组件文件夹

在 WebStorm 中，您可以在一个操作中为 Angular 组件创建一堆文件，甚至将它们全部放在一个单独的文件夹中。为此，您需要使用带有多个子模板的文件模板。当您从父模板创建文件时，会自动生成来自子模板的相关文件。有关详细信息，请参阅具有多个文件的模板。

假设您要创建一个包含一堆组件文件的示例文件夹，例如， example.component.ts用于逻辑，example.component.html用于模板，example.component.css用于样式。您可以使用两个父模板创建一个文件模板，这样所有三个文件都将立即生成并放置在一个单独的文件夹中。

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，选择Editor | 文件和代码模板。

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

   • 在“文件”选项卡中，单击工具栏上的 。一个新的Unnamed模板被添加到列表中。

   • 在右侧窗格中，指定模板名称，让它成为Angular Component，并component.ts作为文件扩展名。

   • 在文件名字段中，键入$NAME/$NAME。

   • （可选）添加代码模板，例如：

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

   

   单击应用。

3. 为相关的 HTML 文件创建一个子模板。

   • 选择父模板Angular Component并单击工具栏上的 。在Angular 组件模板下方添加了一个子模板。

   • 在右侧窗格中，输入$NAME/$NAME文件名字段并指定component.html扩展名。

   单击应用。

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

   • 选择父模板Angular Component并单击工具栏上的 。在Angular 组件模板下方添加了一个子模板。

   • 在右侧窗格中，输入$NAME/$NAME文件名字段并指定component.css扩展名。

5. 单击确定以保存模板。

6. 创建组件文件。

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

   

从模板中提取组件

Extract Angular 组件重构通过运行 来工作，将angular.json文件中的示意图首选项考虑在内ng generate component。

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

2. 从选择的上下文菜单中，选择Refactor | 提取组件。

   或者，按下并从Refactor This弹出窗口中Ctrl+Alt+Shift+T选择Extract Component 。

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

1. 在 Angular 组件文件中，按Ctrl+Alt+Home或选择Navigate | 主菜单中的相关符号或转到 | 上下文菜单中的相关符号。WebStorm 显示一个相关符号弹出窗口，其中包含相关文件的列表。在 TypeScript 组件文件中，弹出窗口还列出了导入该文件的所有符号。

   

2. 要打开一个文件，选择它并按Enter。或者，使用与每种文件类型关联的数字：

   1. 带有组件类的 TypeScript 文件

   2. 模板

   3. 测试

   4. 风格

1. 选择文件 | 从主菜单新建Alt+Insert或在项目工具窗口中按，然后选择Angular Dependency。

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

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

   

1. 选择文件 | 从主菜单新建Alt+Insert或在项目工具窗口中按，然后选择Angular Schematic。

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

   

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

   

配置参数提示

1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | 角 HTML 模板。

2. 从列表中选择参数提示，确保选中显示参数提示复选框，然后指定要显示参数提示的上下文。

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

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

查看 Angular 特定检查列表并进行配置

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 检查。

2. 展开角节点。

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

安装角材料

• 在嵌入式终端( Alt+F12) 中，键入：

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

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

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

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 配色方案 | 角模板。

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

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

   或者，npm start在终端 Alt+F12中运行，或双击npm 工具窗口start中的任务（查看 | 工具窗口 | npm），或单击package.json中脚本旁边的装订线。start

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

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

   

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

1. 在代码中设置断点。

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

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

   

调试在 localhost 上运行的应用程序

1. 在代码中设置断点。

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

3. 运行工具窗口或终端显示应用程序正在运行的URL，默认为http://localhost:4200/。按住Ctrl+Shift并单击此 URL 链接。WebStorm 使用自动生成的JavaScript Debug类型的Angular Application配置启动调试会话。

   

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

1. 在代码中设置断点。

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

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

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

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