使用工具擴充功能中的自訂閘道外掛程式

發行項
11/02/2024
適用於:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

我們將在本文中，在使用 Windows Admin Center CLI 所建立的新空白工具擴充功能中使用自訂閘道外掛程式。

準備您的環境

如果您尚未這麼做，請遵循開發工具擴充功能中的指示來準備您的環境，並建立新的空白工具擴充功能。

將模組新增至專案

如果您尚未這麼做，請將新的空白模組新增至專案，我們將在下一個步驟中使用該模組。

將整合新增至自訂閘道外掛程式

現在，我們將在剛才建立的新空白模組中使用自訂閘道外掛程式。

建立 plugin.service.ts

變更為上述所建立之新工具模組的目錄 (\src\app\{!Module-Name})，並建立新的檔案 plugin.service.ts。

將下列程式碼新增至剛建立的檔案：

import { Injectable } from '@angular/core';
import { AppContextService, HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Cim, Http, PowerShell, PowerShellSession } from '@microsoft/windows-admin-center-sdk/core';
import { AjaxResponse, Observable } from 'rxjs';

@Injectable()
export class PluginService {
    constructor(private appContextService: AppContextService, private http: Http) {
    }

    public getGatewayRestResponse(): Observable<any> {
        let callUrl = this.appContextService.activeConnection.nodeName;

        return this.appContextService.node.get(callUrl, 'features/Sample%20Uno').map(
            (response: any) => {
                return response;
            }
        )
    }
}

視需要將對 Sample Uno 和 Sample%20Uno 的參考變更為功能名稱。

警告

建議使用內建 this.appContextService.node 來呼叫自訂閘道外掛程式中定義的任何 API。這可確保如果閘道外掛程式內需要認證，將會正確處理這些認證。

修改 module.ts

開啟稍早建立之新模組的 module.ts 檔案 (即 {!Module-Name}.module.ts)：

新增下列匯入陳述式：

import { HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Http } from '@microsoft/windows-admin-center-sdk/core';
import { PluginService } from './plugin.service';

新增下列提供者 (宣告之後)：

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

修改 component.ts

開啟稍早建立之新模組的 component.ts 檔案 (即 {!Module-Name}.component.ts)：

新增下列匯入陳述式：

import { ActivatedRouteSnapshot } from '@angular/router';
import { AppContextService } from '@microsoft/windows-admin-center-sdk/angular';
import { Subscription } from 'rxjs';
import { Strings } from '../../generated/strings';
import { PluginService } from './plugin.service';

新增下列變數：

  private serviceSubscription: Subscription;
  private responseResult: string;

修改建構函式並修改/新增下列函式：

  constructor(private appContextService: AppContextService, private plugin: PluginService) {
    //
  }

  public ngOnInit() {
    this.responseResult = 'click go to do something';
  }

  public onClick() {
    this.serviceSubscription = this.plugin.getGatewayRestResponse().subscribe(
      (response: any) => {
        this.responseResult = 'response: ' + response.message;
      },
      (error) => {
        console.log(error);
      }
    );
  }

修改 component.html

開啟稍早建立之新模組的 component.html 檔案 (即 {!Module-Name}.component.html)：

將下列內容新增至該 html 檔案：

<button (click)="onClick()" >go</button>
{{ responseResult }}

建置和側載擴充功能

現在您已準備好在 Windows Admin Center 中建置和側載擴充功能。

共用方式為