Добавление модуля в расширение средства

Применяется к: Windows Admin Center, ознакомительная версия Windows Admin Center

в этой статье мы добавим пустой модуль в расширение инструмента, созданное с помощью интерфейса командной строки центра администрирования Windows.

Подготовка среды

Если вы еще этого не сделали, следуйте указаниям в подсказке по разработке средства (или решения) для подготовки среды и создания нового пустого расширения инструмента.

создание модуля (и компонента) с помощью интерфейса командной строки Angular

Если вы не знакомы с Angular, настоятельно рекомендуется прочитать документацию на веб-сайте Angular.Io, чтобы ознакомиться с Angular и NgModule. Дополнительные сведения о NgModule см. здесь: https://angular.io/guide/ngmodule

Откройте командную строку, измените каталог на .\срк\апп в проекте, а затем выполните следующие команды, заменив {!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

Используйте то же имя модуля, которое использовалось на предыдущем шаге.

Добавление содержимого в новый файл маршрутизации

  • Перейдите к папке Module, созданной 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, чтобы выполнить импорт маршрутизации:

    Исходное значение Новое значение
    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 центре администрирования, чтобы просмотреть результаты.