Aggiungere un modulo a un'estensione dello strumento

Si applica a: Windows Admin Center, Anteprima Windows Admin Center

In questo articolo aggiungere un modulo vuoto a un'estensione dello strumento creata con l'interfaccia della riga di comando di Windows Admin Center.

Predisporre l'ambiente

Se non è già stato fatto, seguire le istruzioni relative allo sviluppo di un'estensione dello strumento (o della soluzione) per preparare l'ambiente e creare una nuova estensione dello strumento vuota.

Usare l'interfaccia della riga di comando di Angular per creare un modulo (e un componente)

Se non si ha familiarità con Angular, è consigliabile leggere la documentazione sul sito Web Angular per informazioni su Angular e NgModule. Per indicazioni, vedere NgModule.

Per altre informazioni, vedere:

• Generazione di un nuovo modulo nell'interfaccia della riga di comando di Angular.
• Generazione di un nuovo componente nell'interfaccia della riga di comando di Angular.

Aprire un prompt dei comandi, modificare la directory in .\src\app nel progetto e quindi eseguire i comandi seguenti, sostituendo {!ModuleName} con il nome del modulo (spazi rimossi).

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

Valore	Spiegazione	Esempio
{!ModuleName}	Nome del modulo (spazi rimossi)	ManageFooWorksPortal

Sintassi di esempio:

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

Aggiungere informazioni di routing

Se non si ha familiarità con Angular, è consigliabile ottenere informazioni sul routing e la navigazione di Angular. Le sezioni seguenti definiscono gli elementi di routing necessari che consentono a Windows Admin Center di passare all'estensione e tra le visualizzazioni nell'estensione in risposta all'attività dell'utente. Per altre informazioni, vedere le indicazioni relative al router

Usare lo stesso nome del modulo usato nel passaggio precedente.

Aggiungere contenuto al nuovo file di routing

1. Passare alla cartella del modulo creata da ng generate nel passaggio precedente.

2. Creare un nuovo file {!module-name}.routing.ts, seguendo questa convenzione di denominazione:

   Valore	Spiegazione	Nome file di esempio
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal.routing.ts

3. Aggiungere questo contenuto al file creato:

   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. Sostituire i valori nel file creato con i valori desiderati:

   Valore	Spiegazione	Esempio
   {!ModuleName}	Nome del modulo (spazi rimossi)	ManageFooWorksPortal
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal

Aggiungere contenuto al nuovo file di modulo

1. Aprire il file {!module-name}.module.ts, disponibile con la convenzione di denominazione seguente:

   Valore	Spiegazione	Nome file di esempio
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal.module.ts

2. Aggiungere contenuto al file:

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

3. Sostituire i valori nel contenuto appena aggiunto con i valori desiderati:

   Valore	Spiegazione	Esempio
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal

4. Modificare l'istruzione relativa alle importazioni per importare il routing:

   Valore originale	Nuovo valore
   imports: [ CommonModule ]	imports: [ CommonModule, Routing ]

5. Assicurarsi che le import istruzioni siano alfabetizzate in base all'origine.

Aggiungere contenuto al nuovo file TypeScript del componente

1. Aprire il file {!module-name}.component.ts, disponibile con la convenzione di denominazione seguente:

   Valore	Spiegazione	Nome file di esempio
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal.component.ts

2. Modificare il contenuto nel file in modo che corrisponda all'esempio seguente.

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

Aggiornare app-routing.module.ts

1. Aprire il file app-routing.module.ts e modificare il percorso predefinito in modo che carichi il nuovo modulo creato. Trovare la voce per path: '' e aggiornare loadChildren per caricare il modulo anziché il modulo predefinito:

   Valore	Spiegazione	Esempio
   {!ModuleName}	Nome del modulo (spazi rimossi)	ManageFooWorksPortal
   {!module-name}	Nome del modulo (minuscolo, spazi sostituiti con trattini)	manage-foo-works-portal

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

   Ecco un esempio di percorso predefinito aggiornato:

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

Compilare e caricare localmente l'estensione

È stato aggiunto un modulo all'estensione. Successivamente, puoi compilare e caricare localmente l'estensione in Windows Admin Center per visualizzare i risultati.