Dodawanie modułu do rozszerzenia narzędzia

W tym artykule dodaj pusty moduł do rozszerzenia narzędzia utworzonego za pomocą interfejsu wiersza polecenia programu Windows Admin Center.

Przygotowywanie środowiska

Jeśli jeszcze tego nie zrobiono, postępuj zgodnie z instrukcjami w artykule Opracowywanie rozszerzenia narzędzia (lub rozwiązania), aby przygotować środowisko i utworzyć nowe, puste rozszerzenie narzędzia.

Tworzenie modułu (i składnika) przy użyciu interfejsu wiersza polecenia platformy Angular

Jeśli dopiero zaczynasz korzystać z platformy Angular, zachęcamy do przeczytania dokumentacji w witrynie internetowej Angular, aby dowiedzieć się więcej na temat platform Angular i NgModule. Aby uzyskać wskazówki, zobacz NgModule .

Dodatkowe informacje:

• Generowanie nowego modułu w interfejsie wiersza polecenia platformy Angular.
• Generowanie nowego składnika w interfejsie wiersza polecenia platformy Angular.

Otwórz wiersz polecenia, przejdź do katalogu .\src\app w swoim projekcie, a następnie uruchom następujące polecenia, zastępując {!ModuleName} nazwą modułu (bez spacji).

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

Przykładowe użycie:

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

Dodawanie informacji o routingu

Jeśli dopiero zaczynasz korzystać z usługi Angular, zalecamy zapoznanie się z usługą Angular Routing and Navigation. W poniższych sekcjach zdefiniowano niezbędne elementy routingu, które umożliwiają usłudze Windows Admin Center przechodzenie do rozszerzenia i między widokami w rozszerzeniu w odpowiedzi na aktywność użytkownika. Aby dowiedzieć się więcej, zobacz Wskazówki dotyczące routera

Użyj tej samej nazwy modułu, która została użyta w poprzednim kroku.

Dodawanie zawartości do nowego pliku routingu

1. Przejdź do folderu modułu utworzonego w poprzednim kroku przez ng generate.

2. Utwórz nowy plik {!module-name}.routing.ts, zgodnie z następującą konwencją nazewnictwa:

   Value	Explanation	Przykładowa nazwa pliku
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal.routing.ts

3. Dodaj tę zawartość do utworzonego pliku:

   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. Zastąp wartości w pliku utworzonym żądanymi wartościami:

   Value	Explanation	Example
   {!ModuleName}	Nazwa modułu (usunięte spacje)	ManageFooWorksPortal
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal

Dodawanie zawartości do nowego pliku modułu

1. Otwórz plik {!module-name}.module.ts, znaleziony przy użyciu następującej konwencji nazewnictwa:

   Value	Explanation	Przykładowa nazwa pliku
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal.module.ts

2. Dodaj zawartość do pliku:

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

3. Zastąp wartości w właśnie dodanej zawartości żądanymi wartościami:

   Value	Explanation	Example
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal

4. Zmodyfikuj instrukcję importowania, aby zaimportować Routing.

   Oryginalna wartość	Nowa wartość
   imports: [ CommonModule ]	imports: [ CommonModule, Routing ]

5. Upewnij się, że import oświadczenia są uporządkowane alfabetycznie według źródła.

Dodaj zawartość do pliku TypeScript nowego składnika

1. Otwórz plik {!module-name}.component.ts, znaleziony przy użyciu następującej konwencji nazewnictwa:

   Value	Explanation	Przykładowa nazwa pliku
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal.component.ts

2. Zmodyfikuj zawartość w pliku, aby odpowiadała następującemu przykładowi.

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

Aktualizowanie app-routing.module.ts

1. Otwórz plik app-routing.module.tsi zmodyfikuj ścieżkę domyślną, aby załadować utworzony nowy moduł. Znajdź wpis dla path: '' i zaktualizuj loadChildren, aby załadować twój moduł zamiast domyślnego.

   Value	Explanation	Example
   {!ModuleName}	Nazwa modułu (usunięte spacje)	ManageFooWorksPortal
   {!module-name}	Nazwa modułu (małe litery, spacje zastąpione kreskami)	manage-foo-works-portal

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

   Oto przykład zaktualizowanej ścieżki domyślnej:

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

Budowanie i ładowanie rozszerzenia zewnętrznego

Teraz dodano moduł do rozszerzenia. Następnie możesz skompilować i ręcznie załadować swoje rozszerzenie w Centrum administracyjnym systemu Windows, aby wyświetlić wyniki.