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

Статья
11/02/2024
Применяется к:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

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

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

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

Создание модуля (и компонента) с помощью 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`

Добавьте это содержимое в созданный файл:

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 операторы имеют алфавитный алфавит по источнику.

Значение	Объяснение	Пример
`{!module-name}`	Имя модуля (нижний регистр, пробелы заменены дефисами)	`manage-foo-works-portal`

Исходное значение	Новое значение
`imports: [ CommonModule ]`	`imports: [ CommonModule, Routing ]`

Добавление содержимого в новый файл 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 Admin Center, чтобы просмотреть результаты.

Поделиться через