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

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

在本文中,我們將在使用 Windows Admin Center CLI 建立的新空白工具延伸模組中使用自訂閘道外掛程式。

準備您的環境

如果您尚未這麼做,請遵循 開發工具延伸 模組中的指示來準備您的環境,並建立新的空白工具延伸模組。

將模組新增至您的專案

如果您還沒有這麼做,請將新的 空白模組 新增至您的專案,我們將在下一個步驟中使用。

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

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

建立外掛程式。

變更至上面建立的新工具模組的目錄 (\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。 這可確保在閘道外掛程式內需要認證,才能正確處理這些認證。

修改模組. ts

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

新增下列 import 語句:

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

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

新增下列 import 語句:

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 中建立並載入您的延伸模組。