Hinzufügen eines Moduls zu einer Toolerweiterung

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

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

Vorbereiten der Umgebung

Führen Sie die Anweisungen unter Entwickeln einer Toolerweiterung (oder Lösungserweiterung ) aus, 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 sind, wird dringend empfohlen, die Dokumentation auf der Seite Angular. E/A-Website, um mehr über Angular und NgModule zu erfahren. Weitere Informationen zu NgModule finden Sie hier: https://angular.io/guide/ngmodule

Öffnen Sie eine Eingabeaufforderung, wechseln Sie in Ihrem Projekt in das Verzeichnis .\src\app, und führen Sie dann die folgenden Befehle aus, {!ModuleName} und ersetzen Sie dabei durch ihren Modulnamen (Leerzeichen entfernt):

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
Wert Erklärung Beispiel
{!ModuleName} Name Ihres Moduls (Entfernte Leerzeichen) ManageFooWorksPortal

Beispielsyntax:

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

Hinzufügen von Routinginformationen

Wenn Sie noch nicht mit Angular sind, wird dringend empfohlen, sich mit Angular routing and navigation (Routing und Navigation) zu informieren. In den folgenden Abschnitten werden die erforderlichen Routingelemente definiert, die es Windows Admin Center ermöglichen, als Reaktion auf Benutzeraktivitäten zu Ihrer Erweiterung und zwischen Ansichten in Ihrer Erweiterung zu navigieren. Weitere Informationen finden Sie hier: https://angular.io/guide/router

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

Hinzufügen von Inhalt zu einer neuen Routingdatei

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

  • Erstellen Sie eine neue Datei {!module-name}.routing.ts, und folgen Sie dieser Benennungskonvention:

    Wert Erklärung Beispieldateiname
    {!module-name} Ihr Modulname (Klein klein, Leerzeichen durch Bindestriche ersetzt) manage-foo-works-portal.routing.ts
  • Fügen Sie der gerade erstellten Datei diesen Inhalt 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 { }
    
  • Ersetzen Sie werte in der gerade erstellten Datei durch die gewünschten Werte:

    Wert Erklärung Beispiel
    {!ModuleName} Name Ihres Moduls (Entfernte Leerzeichen) ManageFooWorksPortal
    {!module-name} Ihr Modulname (Klein klein, Leerzeichen durch Bindestriche ersetzt) manage-foo-works-portal

Hinzufügen von Inhalt zu einer neuen Moduldatei

Öffnen Sie die Datei {!module-name}.module.tsmit der folgenden Namenskonvention:

Wert Erklärung Beispieldateiname
{!module-name} Ihr Modulname (Klein klein, Leerzeichen durch Bindestriche ersetzt) manage-foo-works-portal.module.ts
  • Fügen Sie der Datei Inhalt hinzu:

    import { Routing } from './{!module-name}.routing';
    
  • Ersetzen Sie Werte im soeben hinzugefügten Inhalt durch die gewünschten Werte:

    Wert Erklärung Beispiel
    {!module-name} Ihr Modulname (Klein klein, Leerzeichen durch Bindestriche ersetzt) manage-foo-works-portal
  • Ändern Sie die Imports-Anweisung, um Routing zu importieren:

    Ursprünglicher Wert Neuer Wert
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]
  • Stellen Sie sicher import , dass -Anweisungen nach Quelle alphabetisch sind.

Hinzufügen von Inhalt zu einer neuen TypeScript-Komponentendatei

Öffnen Sie die Datei {!module-name}.component.tsmit der folgenden Namenskonvention:

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

Ändern Sie den Inhalt der Datei wie folgt:

constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

Aktualisieren von app-routing.module.ts

Öffnen Sie die app-routing.module.tsDatei , und ändern Sie den Standardpfad, damit das soeben 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} Name Ihres Moduls (Entfernte Leerzeichen) ManageFooWorksPortal
{!module-name} Ihr Modulname (Klein klein, Leerzeichen durch Bindestriche ersetzt) manage-foo-works-portal
    {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

Hier ist ein Beispiel für einen aktualisierten Standardpfad:

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

Erstellen und Laden 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 laden, um die Ergebnisse zu sehen.