Hinzufügen eines Moduls zu einer ToolerweiterungAdd a module to a tool extension

Gilt für: Windows Admin Center, Windows Admin Center-VorschauApplies To: Windows Admin Center, Windows Admin Center Preview

In diesem Artikel fügen wir ein leeres Modul zu einer Tool Erweiterung hinzu, die wir mit der Windows Admin Center CLI erstellt haben.In this article, we will add an empty module to a tool extension we have created with the Windows Admin Center CLI.

Vorbereiten der UmgebungPrepare your environment

Wenn Sie dies noch nicht getan haben, befolgen Sie die Anweisungen unter Entwickeln einer Tool Erweiterung (oder ProjektMappe), um die Umgebung vorzubereiten und eine neue, leere Tool Erweiterung zu erstellen.If you haven't already, follow the directions in develop a tool (or solution) extension to prepare your environment and create a new, empty tool extension.

Verwenden der Angular-CLI zum Erstellen eines Moduls (und einer Komponente)Use the Angular CLI to create a module (and component)

Wenn Sie noch nicht mit Angular vertraut sind, wird dringend empfohlen, dass Sie die Dokumentation auf der Angular.IO-Website lesen, um mehr über Angular und ngmodule zu erfahren.If you are new to Angular, it is highly recommended that you read the documentation on the Angular.Io website to learn about Angular and NgModule. Weitere Informationen zu ngmodule finden Sie hier: https://angular.io/guide/ngmoduleFor more information about NgModule, go here: https://angular.io/guide/ngmodule

Öffnen Sie eine Eingabeaufforderung, wechseln Sie in Ihrem Projekt zum Verzeichnis ".\src\app", und führen Sie dann die folgenden Befehle aus. ersetzen {!ModuleName} Sie dabei durch den Namen Ihres Moduls (Leerzeichen entfernt):Open a command prompt, change directory to .\src\app in your project, then run the following commands, replacing {!ModuleName} with your module name (spaces removed):

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
WertValue ErklärungExplanation BeispielExample
{!ModuleName} Name des Moduls (Leerzeichen entfernt)Your module name (spaces removed) ManageFooWorksPortal

Beispielverwendung:Example usage:

cd .\src\app
ng generate module ManageFooWorksPortal
ng generate component ManageFooWorksPortal

Routing Informationen hinzufügenAdd routing information

Wenn Sie noch nicht mit Angular vertraut sind, wird dringend empfohlen, sich über das Angular-Routing und die Navigation zu informieren.If you are new to Angular, it is highly recommended you learn about Angular Routing and Navigation. In den folgenden Abschnitten werden die erforderlichen Routing Elemente definiert, mit denen Windows Admin Center in Reaktion auf die Benutzeraktivität zu ihrer Erweiterung und zwischen Sichten in ihrer Erweiterung navigieren kann.The sections below define necessary routing elements that enable Windows Admin Center to navigate to your extension and between views in your extension in response to user activity. Weitere Informationen finden Sie hier: https://angular.io/guide/routerTo learn more, go here: https://angular.io/guide/router

Verwenden Sie den gleichen Modulnamen, den Sie im obigen Schritt verwendet haben.Use the same module name that you used in the step above.

Neuen Routing Dateiinhalt hinzufügenAdd content to new routing file

  • Navigieren Sie zum Modul Ordner, der ng generate im vorherigen Schritt erstellt wurde.Browse to the module folder that was created by ng generate in the previous step.

  • Erstellen Sie eine neue Datei {!module-name}.routing.ts , und befolgen Sie diese Benennungs Konvention:Create a new file {!module-name}.routing.ts, following this naming convention:

    WertValue ErklärungExplanation Beispiel DateinameExample filename
    {!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.routing.ts
  • Fügen Sie den Inhalt der soeben erstellten Datei hinzu:Add this content to the file just created:

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { {!ModuleName}Component } from './{!module-name}.component';
    
    const routes: Routes = [
        {
            path: '',
            component: {!ModuleName}Component,
            // if the component has child components that need to be routed to, include them in the children array.
            children: [
                {
                    path: '',
                    redirectTo: 'base',
                    pathMatch: 'full'
                }
            ]
    }];
    
    @NgModule({
        imports: [
            RouterModule.forChild(routes)
        ],
        exports: [
            RouterModule
        ]
    })
    export class Routing { }
    
  • Ersetzen Sie die Werte in der soeben erstellten Datei durch die gewünschten Werte:Replace values in the file just created with your desired values:

    WertValue ErklärungExplanation BeispielExample
    {!ModuleName} Name des Moduls (Leerzeichen entfernt)Your module name (spaces removed) ManageFooWorksPortal
    {!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal

Inhalt der neuen Modul Datei hinzufügenAdd content to new module file

Datei öffnen {!module-name}.module.ts , mit der folgenden Benennungs Konvention gefunden:Open file {!module-name}.module.ts, found with the following naming convention:

WertValue ErklärungExplanation Beispiel DateinameExample filename
{!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.module.ts
  • Fügen Sie der Dateiinhalt hinzu:Add content to the file:

    import { Routing } from './{!module-name}.routing';
    
  • Ersetzen Sie die Werte im soeben hinzugefügten Inhalt mit den gewünschten Werten:Replace values in the content just added with your desired values:

    WertValue ErklärungExplanation BeispielExample
    {!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal
  • Ändern Sie die Imports-Anweisung, um Routing zu importieren:Modify the imports statement to import Routing:

    Ursprünglicher WertOriginal value Neuer WertNew value
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]
  • Stellen Sie sicher, dass- import Anweisungen nach Quelle alphabetisch sortiert werden.Make sure import statements are alphabetized by source.

Inhalt der neuen komponententypescript-Datei hinzufügenAdd content to new component typescript file

Datei öffnen {!module-name}.component.ts , mit der folgenden Benennungs Konvention gefunden:Open file {!module-name}.component.ts, found with the following naming convention:

WertValue ErklärungExplanation Beispiel DateinameExample filename
{!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal.component.ts

Ändern Sie den Inhalt der Datei wie folgt:Modify content in the file to the following:

constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

Aktualisieren von App-Routing. Module. TSUpdate app-routing.module.ts

Öffnen Sie die Datei app-routing.module.ts , und ändern Sie den Standardpfad, damit das neue Modul geladen wird, das Sie soeben erstellt haben.Open file app-routing.module.ts, and modify the default path so it will load the new module you just created. Suchen Sie den Eintrag für path: '' , und aktualisieren loadChildren Sie, um das Modul anstelle des Standardmoduls zu laden:Find the entry for path: '', and update loadChildren to load your module instead of the default module:

WertValue ErklärungExplanation BeispielExample
{!ModuleName} Name des Moduls (Leerzeichen entfernt)Your module name (spaces removed) ManageFooWorksPortal
{!module-name} Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)Your module name (lower case, spaces replaced with dashes) manage-foo-works-portal
    {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

Im folgenden finden Sie ein Beispiel für einen aktualisierten Standardpfad:Here's an example of an updated default path:

    {
        path: '',
        loadChildren: 'app/manage-foo-works-portal/manage-foo-works-portal.module#ManageFooWorksPortalModule'
    },

Erstellen und neben Laden Ihrer ErweiterungBuild and side load your extension

Sie haben nun ein Modul zu ihrer Erweiterung hinzugefügt.You've now added a module to your extension. Als nächstes können Sie Ihre Erweiterung im Windows Admin Center Erstellen und auslagern, um die Ergebnisse anzuzeigen.Next, you can build and side load your extension in Windows Admin Center to see the results.