Hinzufügen eines Moduls zu einer Toolerweiterung

• Gilt für::

  ✅ Windows Admin Center, ✅ Windows Admin Center Preview

In diesem Artikel fügen wir ein leeres Modul zu einer Toolerweiterung hinzu, die wir mit der Windows Admin Center-Befehlszeilenschnittstelle erstellt haben.

Vorbereiten der Umgebung

Wenn Sie dies noch nicht getan haben, folgen Sie den Anweisungen unter Entwickeln einer Toolerweiterung (oder Entwickeln einer Lösungserweiterung), um Ihre Umgebung vorzubereiten und eine neue, leere Toolerweiterung zu erstellen.

Verwenden der Angular CLI zum Erstellen eines Moduls (und einer Komponente)

Wenn Sie noch nicht mit Angular vertraut sind, sollten Sie die Dokumentation auf der Angular-Website lesen, um mehr über Angular und NgModule zu erfahren. Anleitungen finden Sie unter NgModule.

Weitere Informationen:

• Generating a new module in Angular CLI (Generieren eines neuen Moduls in der Angular CLI)
• Generating a new component in Angular CLI (Generieren einer neuen Komponente in der Angular CLI)

Öffnen Sie eine Eingabeaufforderung, wechseln Sie in Ihrem Projekt in das Verzeichnis „.\src\app“, und führen Sie dann die folgenden Befehle aus, wobei Sie {!ModuleName} durch den Namen Ihres Moduls ersetzen (ohne Leerzeichen):

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}

Wert	Erklärung	Beispiel
{!ModuleName}	Der Modulname (ohne Leerzeichen)	ManageFooWorksPortal

Beispielsyntax:

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

Hinzufügen von Routinginformationen

Wenn Sie noch nicht mit Angular vertraut sind, sollten Sie etwas über das Routing und die Navigation in Angular lernen. In den folgenden Abschnitten werden die erforderlichen Routingelemente definiert, mit denen Windows Admin Center zu Ihrer Erweiterung und zwischen den Ansichten in Ihrer Erweiterung als Reaktion auf Benutzeraktivitäten navigieren kann. Weitere Informationen finden Sie im Routerleitfaden

Verwenden Sie den gleichen Modulnamen, den Sie im vorhergehenden Schritt verwendet haben.

Hinzufügen von Inhalt zu einer neuen Routingdatei

1. Navigieren Sie zum Modulordner, der im vorherigen Schritt von ng generate erstellt wurde.

2. Erstellen Sie die neue Datei {!module-name}.routing.ts, und befolgen Sie dabei diese Namenskonvention:

   Wert	Erklärung	Beispieldateiname
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal.routing.ts

3. Fügen Sie diesen Inhalt der erstellten Datei hinzu:

   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 { }
   

4. Ersetzen Sie Werte in der erstellten Datei durch die gewünschten Werte:

   Wert	Erklärung	Beispiel
   {!ModuleName}	Der Modulname (ohne Leerzeichen)	ManageFooWorksPortal
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal

Hinzufügen von Inhalt zur neuen Moduldatei

1. Öffnen Sie Datei {!module-name}.module.ts, die mit der folgenden Namenskonvention gefunden wurde:

   Wert	Erklärung	Beispieldateiname
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal.module.ts

2. Fügen Sie der Datei den Inhalt hinzu:

   import { Routing } from './{!module-name}.routing';
   

3. Ersetzen Sie Werte im soeben hinzugefügten Inhalt durch die gewünschten Werte:

   Wert	Erklärung	Beispiel
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal

4. Ändern Sie die „imports“-Anweisung, um Routing zu importieren:

   Ursprünglicher Wert	Neuer Wert
   imports: [ CommonModule ]	imports: [ CommonModule, Routing ]

5. Stellen Sie sicher, dass import-Anweisungen nach Quelle alphabetisch geordnet sind.

Hinzufügen von Inhalt zu einer neuen TypeScript-Komponentendatei

1. Öffnen Sie Datei {!module-name}.component.ts, die mit der folgenden Namenskonvention gefunden wurde:

   Wert	Erklärung	Beispieldateiname
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal.component.ts

2. Ändern Sie den Inhalt in der Datei so, dass er dem folgenden Beispiel entspricht.

   constructor() {
       // TODO
   }
   
   public ngOnInit() {
       // TODO
   }
   

Aktualisieren von „app-routing.module.ts“

1. Öffnen Sie die Datei app-routing.module.ts, und ändern Sie den Standardpfad, damit das von Ihnen erstellte neue Modul geladen wird. Suchen Sie den Eintrag für path: '', und aktualisieren Sie loadChildren, um Ihr Modul anstelle des Standardmoduls zu laden:

   Wert	Erklärung	Beispiel
   {!ModuleName}	Der Modulname (ohne Leerzeichen)	ManageFooWorksPortal
   {!module-name}	Der Modulname (in Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt)	manage-foo-works-portal

       {
           path: '',
           loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
       },
   

   Hier sehen Sie ein Beispiel für einen aktualisierten Standardpfad:

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

Erstellen und Querladen der Erweiterung

Sie haben Ihrer Erweiterung nun ein Modul hinzugefügt. Als Nächstes können Sie Ihre Erweiterung in Windows Admin Center erstellen und quer laden, um die Ergebnisse anzuzeigen.