ツール拡張機能でカスタムのゲートウェイ プラグインを使用する

適用先:Windows Admin Center、Windows Admin Center Preview

この記事では、管理センター CLI で作成した新しい空のツール拡張機能で、カスタム ゲートウェイ プラグインWindows使用します。

環境を準備する

まだ行っていない場合は、ツール拡張機能の開発手順に従って環境を準備し、新しい空のツール拡張機能を作成します。

プロジェクトにモジュールを追加する

まだ行っていない場合は、次の手順で使用する新しい空のモジュールをプロジェクトに追加します。

カスタム ゲートウェイ プラグインに統合を追加する

次に、作成した新しい空のモジュールでカスタム ゲートウェイ プラグインを使用します。

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 参照を機能名に変更します。

警告

カスタム ゲートウェイ プラグインで定義されている API を呼び出す場合は、組み込みの を this.appContextService.node 使用をお勧めします。 これにより、ゲートウェイ プラグイン内で資格情報が必要な場合は、適切に処理されます。

module.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.ts を変更する

前に 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準備ができました。