新增模組至工具擴充功能

文章
02/21/2024

適用於: Windows Admin Center、Windows Admin Center 預覽版

在本文中，我們會使用 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}

值	說明	範例
`{!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

值	說明	範例檔案名稱
`{!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

值	說明	範例檔案名稱
`{!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 陳述式依來源照字母順序排列。

值	說明	範例
`{!module-name}`	您的模組名稱 (小寫，以虛線取代空格)	`manage-foo-works-portal`

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

將內容新增至新的元件 TypeScript 檔案

開啟使用下列命名慣例找到的檔案 {!module-name}.component.ts:

值說明範例檔案名稱

{!module-name} 您的模組名稱 (小寫，以虛線取代空格) manage-foo-works-portal.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 中建置和側載擴充功能，以查看結果。

分享方式：