将模块添加到工具扩展中

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

本文将向使用管理中心 CLI 创建的工具扩展添加Windows模块。

准备环境

如果尚未创建,请按照开发工具扩展或解决方案扩展 (中的) 来准备环境并创建新的空工具扩展。

使用 Angular CLI 创建模块 (和组件)

如果你不熟悉 Angular,强烈建议你阅读 Angular.Io 网站上的文档,以了解 Angular 和 NgModule。 有关 NgModule 的详细信息,请转至:https://angular.io/guide/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 导航到扩展并在扩展之间的视图间进行导航,以响应用户活动。 要了解详细信息,请转至:https://angular.io/guide/router

使用上述步骤中使用的同一模块名称。

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

  • 浏览到在上一步 ng generate 中创建的模块文件夹。

  • 按照此命名约定,创建新文件 {!module-name}.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
  • 将内容添加到文件:

    import { Routing } from './{!module-name}.routing';
    
  • 将刚添加的内容中的值替换为所需的值:

    说明 示例
    {!module-name} 模块名称(小写,空格替换为短划线) manage-foo-works-portal
  • 修改导入语句以导入路由:

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

将内容添加到新的组件 typescript 文件

打开使用以下命名约定找到的文件 {!module-name}.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并旁加载扩展以查看结果。