在工具扩展中使用自定义的网关插件

项目
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-Name}.module.ts）的 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

打开之前创建的新模块（即 {!Module-Name}.component.ts）的 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

打开之前创建的新模块（即 {!Module-Name}.component.html）的 component.html 文件：

将以下内容添加到 html 文件：

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

通过