将模块添加到工具扩展中

项目
05/08/2023

适用于：Windows Admin Center、Windows Admin Center 预览版

本文介绍如何将空模块添加到使用 Windows Admin Center CLI 创建的工具扩展。

准备环境

如果尚未这样做，请按照开发工具（或解决方案）扩展中的说明准备环境并创建新的空工具扩展。

使用 Angular CLI 创建模块（和组件）

如果你不熟悉 Angular，建议你阅读 Angular 网站上的文档，以了解 Angular 和 NgModule。有关指导，请参阅 NgModule。

若要了解详细信息，请访问以下链接：

打开命令提示符，在项目中将目录更改为 .\src\app，然后运行以下命令，将 {!ModuleName} 替换为模块名称（删除空格）。

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}

值	说明	示例
`{!ModuleName}`	模块名称（删除空格）	`ManageFooWorksPortal`

示例用法：

cd .\src\app
ng generate module ManageFooWorksPortal
ng generate component ManageFooWorksPortal

添加路由信息

如果你不熟悉 Angular，建议你了解 Angular 路由和导航。以下各节定义了必要的路由元素，这些元素可使 Windows Admin Center 导航到扩展并在扩展中的视图之间导航，以响应用户活动。若要了解详细信息，请参阅路由器指南

使用在上一步中使用的相同模块名称。

将内容添加到新的路由文件

浏览到上一步中由 ng generate 创建的模块文件夹。
按照此命名约定，创建新文件 {!module-name}.routing.ts：

值说明示例文件名

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal.routing.ts

值	说明	示例文件名
`{!module-name}`	模块名称（小写，空格替换为短划线）	`manage-foo-works-portal.routing.ts`

将此内容添加到创建的文件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { {!ModuleName}Component } from './{!module-name}.component';

const routes: Routes = [
    {
        path: '',
        component: {!ModuleName}Component,
        // if the component has child components that need to be routed to, include them in the children array.
        children: [
            {
                path: '',
                redirectTo: 'base',
                pathMatch: 'full'
            }
        ]
}];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class Routing { }

将创建的文件中的值替换为所需的值：

值说明示例

{!ModuleName} 模块名称（删除空格） ManageFooWorksPortal

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal

将内容添加到新模块文件

打开使用以下命名约定找到的文件 {!module-name}.module.ts：

值说明示例文件名

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal.module.ts

值	说明	示例文件名
`{!module-name}`	模块名称（小写，空格替换为短划线）	`manage-foo-works-portal.module.ts`

将内容添加到文件：

import { Routing } from './{!module-name}.routing';

将刚添加的内容中的值替换为所需的值：

值说明示例

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal
修改导入语句以导入路由：

原始值新值

imports: [ CommonModule ] imports: [ CommonModule, Routing ]
确保 import 语句按源的字母顺序排序。

值	说明	示例
`{!module-name}`	模块名称（小写，空格替换为短划线）	`manage-foo-works-portal`

原始值	新值
`imports: [ CommonModule ]`	`imports: [ CommonModule, Routing ]`

将内容添加到新组件 TypeScript 文件

打开使用以下命名约定找到的文件 {!module-name}.component.ts：

值说明示例文件名

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal.component.ts

值	说明	示例文件名
`{!module-name}`	模块名称（小写，空格替换为短划线）	`manage-foo-works-portal.component.ts`

修改文件中的内容以匹配以下示例。

constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

更新 app-routing.module.ts

打开文件 app-routing.module.ts，并修改默认路径，以便加载创建的新模块。找到 path: '' 的条目，并更新 loadChildren 以加载你的模块（而不是默认模块）：

值说明示例

{!ModuleName} 模块名称（删除空格） ManageFooWorksPortal

{!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal
```
    {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },
```
下面是更新后的默认路径的示例：
```
    {
        path: '',
        loadChildren: 'app/manage-foo-works-portal/manage-foo-works-portal.module#ManageFooWorksPortalModule'
    },
```

生成并旁加载扩展

现在，你已将模块添加到扩展。接下来，便可以在 Windows Admin Center 中生成并旁加载扩展以查看结果。