分享方式:


新增模組至工具擴充功能

適用於: 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 能夠瀏覽至您的擴充功能,以及擴充功能的檢視之間,以回應使用者活動。 若要深入了解,請參閱 路由指導方針

使用您在上一個步驟中使用的相同模組名稱。

將內容新增至新的路由檔案

  1. 瀏覽至上一個步驟中 ng generate 所建立的模組資料夾。

  2. 依照這個命名慣例,建立新的檔案 {!module-name}.routing.ts:

    說明 範例檔案名稱
    {!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. 將已建立檔案中的值取代為您所需的值:

    說明 範例
    {!ModuleName} 您的模組名稱 (已移除空格) ManageFooWorksPortal
    {!module-name} 您的模組名稱 (小寫,以虛線取代空格) manage-foo-works-portal

將內容新增至新的模組檔案

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

    說明 範例檔案名稱
    {!module-name} 您的模組名稱 (小寫,以虛線取代空格) manage-foo-works-portal.module.ts
  2. 將內容新增至檔案:

    import { Routing } from './{!module-name}.routing';
    
  3. 將已新增内容中的值取代為您所需的值:

    說明 範例
    {!module-name} 您的模組名稱 (小寫,以虛線取代空格) manage-foo-works-portal
  4. 修改 Imports 陳述式以匯入路由:

    原始值 新值
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]
  5. 請確定 import 陳述式依來源照字母順序排列。

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

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

    說明 範例檔案名稱
    {!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 以載入模組,而不是預設模組:

    說明 範例
    {!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 中建置和側載擴充功能,以查看結果。