Verwenden eines benutzerdefinierten Gateway-Plug-Ins in der Toolerweiterung

Gilt für: Windows Admin Center, Windows Admin Center-Vorschau

In diesem Artikel verwenden wir ein benutzerdefiniertes Gateway-Plug-In in einer neuen, leeren Toolerweiterung, die wir mit der Windows Admin Center-CLI erstellt haben.

Vorbereiten der Umgebung

Falls noch nicht, befolgen Sie die Anweisungen unter Entwickeln einer Toolerweiterung, um Ihre Umgebung vorzubereiten und eine neue, leere Toolerweiterung zu erstellen.

Hinzufügen eines Moduls zu Ihrem Projekt

Falls noch nicht vorhanden, fügen Sie Ihrem Projekt ein neues leeres Modul hinzu, das wir im nächsten Schritt verwenden werden.

Hinzufügen der Integration zum benutzerdefinierten Gateway-Plug-In

Nun verwenden wir ein benutzerdefiniertes Gateway-Plug-In im neuen, leeren Modul, das wir gerade erstellt haben.

Erstellen von "plugin.service.ts"

Wechseln Sie in das Verzeichnis des oben erstellten neuen Toolmoduls ( \src\app\{!Module-Name} ), und erstellen Sie eine neue plugin.service.ts Datei.

Fügen Sie der gerade erstellten Datei den folgenden Code hinzu:

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;
            }
        )
    }
}

Ändern Sie die Verweise Sample Uno auf und auf Ihren Sample%20Uno Featurenamen entsprechend.

Warnung

Es wird empfohlen, das integrierte zum Aufrufen einer beliebigen API zu this.appContextService.node verwenden, die in Ihrem benutzerdefinierten Gateway-Plug-In definiert ist. Dadurch wird sichergestellt, dass Anmeldeinformationen, die in Ihrem Gateway-Plug-In erforderlich sind, ordnungsgemäß verarbeitet werden.

Ändern von module.ts

Öffnen Sie module.ts die Datei des zuvor erstellten neuen Moduls (d. h.): {!Module-Name}.module.ts

Fügen Sie die folgenden import-Anweisungen hinzu:

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

Fügen Sie die folgenden Anbieter hinzu (nach Deklarationen):

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Ändern von component.ts

Öffnen Sie component.ts die Datei des zuvor erstellten neuen Moduls (d. h.): {!Module-Name}.component.ts

Fügen Sie die folgenden import-Anweisungen hinzu:

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';

Fügen Sie die folgenden Variablen hinzu:

  private serviceSubscription: Subscription;
  private responseResult: string;

Ändern Sie den Konstruktor, und ändern/fügen Sie die folgenden Funktionen hinzu:

  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);
      }
    );
  }

Ändern component.html

Öffnen Sie component.html die Datei des zuvor erstellten neuen Moduls (d. h.): {!Module-Name}.component.html

Fügen Sie der HTML-Datei den folgenden Inhalt hinzu:

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

Erstellen und Laden der Erweiterung

Nun können Sie Ihre Erweiterung im Admin Center erstellen und Windows laden.