共用方式為

新增模組至工具擴充功能

  • 適用於: ✅ 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 陳述式以匯入路由:

    原始價值 新價值
    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