将模块添加到工具扩展中Add a module to a tool extension

适用于:Windows Admin Center、Windows Admin Center 预览版Applies To: Windows Admin Center, Windows Admin Center Preview

在本文中,我们将向使用 Windows 管理中心 CLI 创建的工具扩展添加一个空模块。In this article, we will add an empty module to a tool extension we have created with the Windows Admin Center CLI.

准备环境Prepare your environment

如果尚未这样做,请按照开发工具 (或解决方案) 扩展中的说明来准备环境,并创建新的空工具扩展。If you haven't already, follow the directions in develop a tool (or solution) extension to prepare your environment and create a new, empty tool extension.

使用 "角度" CLI 创建模块 (和组件) Use the Angular CLI to create a module (and component)

如果你不熟悉 Angular,强烈建议你阅读 Angular.Io 网站上的文档,以了解 Angular 和 NgModule。If you are new to Angular, it is highly recommended that you read the documentation on the Angular.Io website to learn about Angular and NgModule. 有关 NgModule 的详细信息,请转至:https://angular.io/guide/ngmoduleFor more information about NgModule, go here: https://angular.io/guide/ngmodule

打开命令提示符,将目录更改为项目中的 \src\app,然后运行以下命令,并将替换 {!ModuleName} 为) 删除空格 (空格:Open a command prompt, change directory to \src\app in your project, then run the following commands, replacing {!ModuleName} with your module name (spaces removed):

cd \src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
Value 说明Explanation 示例Example
{!ModuleName} 模块名称(删除空格)Your module name (spaces removed) ManageFooWorksPortal

示例用法:Example usage:

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

添加路由信息Add routing information

如果你不熟悉 Angular,强烈推荐你了解 Angular 路由和导航。If you are new to Angular, it is highly recommended you learn about Angular Routing and Navigation. 以下各节定义了必要的路由元素,可使 Windows Admin Center 导航到扩展并在扩展之间的视图间进行导航,以响应用户活动。The sections below define necessary routing elements that enable Windows Admin Center to navigate to your extension and between views in your extension in response to user activity. 要了解详细信息,请转至:https://angular.io/guide/routerTo learn more, go here: https://angular.io/guide/router

使用在上述步骤中所用的模块名称。Use the same module name that you used in the step above.

将内容添加到新的路由文件Add content to new routing file

  • 浏览到上一步中由 ng generate 创建的模块文件夹。Browse to the module folder that was created by ng generate in the previous step.

  • 按照此命名约定,创建新文件 {!module-name}.routing.tsCreate a new file {!module-name}.routing.ts, following this naming convention:

    Value 说明Explanation 示例文件名Example filename
    {!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.routing.ts
  • 将此内容添加到刚创建的文件:Add this content to the file just created:

    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 { }
    
  • 将刚创建的文件中的值替换为所需的值:Replace values in the file just created with your desired values:

    Value 说明Explanation 示例Example
    {!ModuleName} 模块名称(删除空格)Your module name (spaces removed) ManageFooWorksPortal
    {!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal

将内容添加到新模块文件Add content to new module file

打开使用以下命名约定找到的文件 {!module-name}.module.tsOpen file {!module-name}.module.ts, found with the following naming convention:

Value 说明Explanation 示例文件名Example filename
{!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.module.ts
  • 将内容添加到文件:Add content to the file:

    import { Routing } from './{!module-name}.routing';
    
  • 将刚添加的内容中的值替换为所需的值:Replace values in the content just added with your desired values:

    Value 说明Explanation 示例Example
    {!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal
  • 修改导入语句以导入路由:Modify the imports statement to import Routing:

    原始值Original value 新值New value
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]
  • 确保 import 语句按源的字母顺序排序。Make sure import statements are alphabetized by source.

向新组件 typescript 文件添加内容Add content to new component typescript file

打开使用以下命名约定找到的文件 {!module-name}.component.tsOpen file {!module-name}.component.ts, found with the following naming convention:

Value 说明Explanation 示例文件名Example filename
{!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.component.ts

将文件中的内容修改为以下内容:Modify content in the file to the following:

constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

更新应用程序-路由Update app-routing.module.ts

打开文件 app-routing.module.ts ,修改默认路径,以便加载刚创建的新模块。Open file app-routing.module.ts, and modify the default path so it will load the new module you just created. 查找的条目 path: '' ,并更新 loadChildren 以加载模块,而不是默认模块:Find the entry for path: '', and update loadChildren to load your module instead of the default module:

Value 说明Explanation 示例Example
{!ModuleName} 模块名称(删除空格)Your module name (spaces removed) ManageFooWorksPortal
{!module-name} 模块名称(小写,空格替换为短划线)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal
    {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

下面是已更新的默认路径的示例:Here's an example of an updated default path:

    {
        path: '',
        loadChildren: 'app/manage-foo-works-portal/manage-foo-works-portal.module#ManageFooWorksPortalModule'
    },

生成和加载扩展Build and side load your extension

现在,你已将一个模块添加到了你的扩展。You've now added a module to your extension. 接下来,你可以在 Windows 管理中心中构建和端加载扩展,以查看结果。Next, you can build and side load your extension in Windows Admin Center to see the results.