通过

将模块添加到工具扩展中

  • 适用于: ✅ Windows Admin Center, ✅ Windows Admin Center Preview

本文介绍如何将空模块添加到使用 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}
Value Explanation Example
{!ModuleName} 模块名称（删除空格） ManageFooWorksPortal

示例用法：

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

添加路由信息

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

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

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

  1. 浏览到上一步中由 ng generate 创建的模块文件夹。

  2. 按照此命名约定，创建新文件 {!module-name}.routing.ts：

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

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

    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 { }

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

    Value Explanation Example
    {!ModuleName} 模块名称（删除空格） ManageFooWorksPortal
    {!module-name} 模块名称（小写，空格替换为短划线） manage-foo-works-portal

将内容添加到新模块文件

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

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

  2. 将内容添加到文件：

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

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

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

  4. 修改导入语句以导入路由：

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

  5. 确保 import 语句按源的字母顺序排序。

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

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

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

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

    constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

更新 app-routing.module.ts

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

    Value Explanation Example
    {!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 中生成并旁加载扩展以查看结果。

  • Last updated on