Använd ett anpassat gateway-insticksprogram i verktygstillägget

Artikel
03/27/2025
Gäller för:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

I den här artikeln använder vi ett anpassat gateway-plugin-program i ett nytt, tomt verktygstillägg som vi har skapat med Windows Admin Center CLI.

Förbereda din miljö

Om du inte redan har gjort det följer du anvisningarna i utveckla ett verktygstillägg för att förbereda miljön och skapa ett nytt, tomt verktygstillägg.

Lägga till en modul i projektet

Om du inte redan har gjort det lägger du till en ny tom modul i projektet, som vi kommer att använda i nästa steg.

Lägga till integrering i plugin-programmet för anpassad gateway

Nu ska vi använda ett anpassat gateway-plugin-program i den nya, tomma modulen som vi nyss skapade.

Skapa plugin.service.ts

Ändra till katalogen för den nya verktygsmodulen som skapades ovan (\src\app\{!Module-Name}) och skapa en ny fil plugin.service.ts.

Lägg till följande kod i filen som nyss skapades:

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

Ändra vid behov referenser till Sample Uno och Sample%20Uno till ditt funktionsnamn.

Varning

Vi rekommenderar att den inbyggda this.appContextService.node används för att anropa alla API:er som definieras i ditt anpassade gateway-plugin-program. Detta säkerställer att om autentiseringsuppgifter krävs i gateway-plugin-programmet så kommer de att hanteras korrekt.

Ändra module.ts

Öppna filen module.ts för den nya modulen som skapades tidigare (dvs. {!Module-Name}.module.ts):

Lägg till följande importinstruktioner:

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

Lägg till följande leverantörer (efter deklarationer):

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Ändra component.ts

Öppna filen component.ts för den nya modulen som skapades tidigare (dvs. {!Module-Name}.component.ts):

Lägg till följande importinstruktioner:

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

Lägg till följande variabler:

  private serviceSubscription: Subscription;
  private responseResult: string;

Ändra konstruktorn och ändra/lägga till följande funktioner:

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

Ändra component.html

Öppna filen component.html för den nya modulen som skapades tidigare (dvs. {!Module-Name}.component.html):

Lägg till följande innehåll i html-filen:

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

Bygg och sidladda ditt tillägg

Nu är du redo att bygga och sidoladda ditt tillägg i Windows Admin Center.

Dela via