Ajouter un module à une extension d’outil

S'applique à : Windows Admin Center, Windows Admin Center Preview

dans cet article, nous allons ajouter un module vide à une extension d’outil que nous avons créée à l’aide de l’interface de commande Windows du centre d’administration.

Préparation de votre environnement

Si vous ne l’avez pas déjà fait, suivez les instructions fournies dans développer une extension d' outil (ou de solution) pour préparer votre environnement et créer une nouvelle extension d’outil vide.

utiliser l’interface CLI Angular pour créer un module (et un composant)

si vous débutez avec Angular, nous vous recommandons vivement de lire la documentation sur le Angular. site web d’e/s pour en savoir plus sur Angular et NgModule. Pour plus d’informations sur NgModule, cliquez ici : https://angular.io/guide/ngmodule

Ouvrez une invite de commandes, accédez au répertoire .\src\app dans votre projet, puis exécutez les commandes suivantes, en remplaçant {!ModuleName} par le nom de votre module (espaces supprimés) :

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
Valeur Explication Exemple
{!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal

Exemple d'utilisation :

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

Ajouter des informations de routage

si vous débutez avec Angular, il est vivement recommandé d’en savoir plus sur le routage et la Navigation Angular. les sections ci-dessous définissent les éléments de routage nécessaires qui permettent à Windows centre d’administration d’accéder à votre extension et entre les vues de votre extension en réponse à l’activité de l’utilisateur. Pour en savoir plus, cliquez ici : https://angular.io/guide/router

Utilisez le même nom de module que celui utilisé à l’étape précédente.

Ajouter du contenu à un nouveau fichier de routage

  • Accédez au dossier du module créé par ng generate à l’étape précédente.

  • Créez un nouveau fichier {!module-name}.routing.ts en suivant la Convention d’affectation de noms suivante :

    Valeur Explication Exemple de nom de fichier
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.routing.ts
  • Ajoutez ce contenu au fichier que vous venez de créer :

    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 { }
    
  • Remplacez les valeurs du fichier que vous venez de créer par les valeurs de votre choix :

    Valeur Explication Exemple
    {!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal

Ajouter du contenu au nouveau fichier de module

Ouvrez {!module-name}.module.ts le fichier, identifié avec la Convention d’affectation de noms suivante :

Valeur Explication Exemple de nom de fichier
{!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.module.ts
  • Ajoutez du contenu au fichier :

    import { Routing } from './{!module-name}.routing';
    
  • Remplacez les valeurs dans le contenu que vous venez d’ajouter par les valeurs souhaitées :

    Valeur Explication Exemple
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal
  • Modifiez l’instruction Imports pour importer le routage :

    Valeur d'origine Nouvelle valeur
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]
  • Vérifiez que import les instructions sont classées par ordre alphabétique par source.

Ajouter du contenu au nouveau fichier de machine à écrire du composant

Ouvrez {!module-name}.component.ts le fichier, identifié avec la Convention d’affectation de noms suivante :

Valeur Explication Exemple de nom de fichier
{!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.component.ts

Modifiez le contenu du fichier comme suit :

constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

Mettre à jour l’application-routage. module. TS

Ouvrez app-routing.module.ts le fichier et modifiez le chemin d’accès par défaut afin qu’il charge le nouveau module que vous venez de créer. Recherchez l’entrée pour path: '' et mettez à jour loadChildren pour charger votre module au lieu du module par défaut :

Valeur Explication Exemple
{!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal
{!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal
    {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

Voici un exemple de chemin d’accès par défaut mis à jour :

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

Créez et chargez votre extension

Vous avez maintenant ajouté un module à votre extension. ensuite, vous pouvez créer et charger votre extension dans Windows centre d’administration pour voir les résultats.