ng-alain Component Development
Build ng-alain Enterprise UI Components
La création d'interfaces utilisateur Angular d'entreprise nécessite la connaissance des composants ng-alain, du theming et des patterns. Cette compétence fournit des exemples de code prêts à l'emploi pour les tables ST, les formulaires SF, les permissions ACL et les layouts responsives, suivant les meilleures pratiques Angular.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ng-alain Component Development」。 Créer un composant ST table pour afficher les commandes avec les colonnes ID de commande, nom du client, montant total, badge de statut et date
預期結果:
- OrderTableComponent généré avec configuration des colonnes ST
- Pagination ajoutée avec sélecteur de taille de page
- Badges de statut inclus (en attente, en cours, expédié, livré)
- Boutons Modifier et Supprimer ajoutés avec dialogues de confirmation
- Tri configuré sur les colonnes montant et date
安全審計
安全Pure documentation skill containing only markdown content with inline code examples for reference. No executable code, no file system access, no network calls, no command execution. Safe for publication.
品質評分
你能建構什麼
Composants de Tableau de Bord d'Entreprise
Construire des tableaux de bord riches en données avec des tableaux, des cartes de statistiques et des layouts responsives utilisant les composants ng-zorro.
Gestion des Formulaires et des Données
Créer des formulaires complexes avec validation par schéma, listes déroulantes asynchrones et intégration modale pour les opérations CRUD.
Systèmes de Contrôle d'Accès
Implémenter la visibilité de l'interface basée sur les rôles avec les directives ACL et les services de permission dans les applications d'entreprise.
試試這些提示
Créer un composant ST table avec pagination qui affiche une liste d'utilisateurs avec les colonnes ID, nom, email, statut et actions.
Créer un formulaire SF avec schéma pour un système de gestion de tâches avec les champs titre, description, liste déroulante de statut, boutons radio de priorité, sélecteur asynchrone d'attribué, sélecteur de date d'échéance et entrée de tags.
Créer un composant Angular avec permissions ACL qui affiche les boutons Créer, Modifier et Supprimer uniquement lorsque les utilisateurs ont les permissions correspondantes 'task:create', 'task:edit' et 'task:delete'.
Construire une page complète de gestion de tâches avec en-tête de page, navigation par fil d'Ariane, cartes de statistiques responsives pour les comptages de tâches, et une table ST avec filtre, tri et boutons d'action.
最佳實務
- Utiliser SHARED_IMPORTS pour consolider les importations communes des modules ng-zorro et @delon à travers les composants
- Implémenter les points de rupture responsives (nzXs, nzSm, nzMd, nzLg) pour des layouts mobile-first
- Ajouter des labels ARIA appropriés et des attributs d'accessibilité pour la navigation au clavier
避免
- Éviter de coder en dur des nombres magiques pour les largeurs de colonnes - utiliser les points de rupture responsives à la place
- Ne pas sauter les états de chargement pendant la récupération asynchrone de données
- Éviter de mélanger les formulaires pilotés par modèle et réactifs sans séparation claire