Encore un autre article angulaire, création de composants de pièce

Dans l'article précédent, je viens de parler de création de projet. Je veux dire, le projet principal, pas les sous-projets. Ceux-là feront l’objet d’un prochain article.

Aujourd'hui est lié à la création de composants. Et comme la création de projets, Angular CLI est votre meilleur ami. Alors allez-y avec :

 
ng générer un composant hello-world

Il exécute la génération de code dans le dossier my-new-project/src/app/hello-world avec 4 fichiers :

• hello-world.component.html  : le modèle
• hello-world.component.scss  : les styles, au format scss puisque c'est mon choix à l'invite de création du projet
• hello-world.component.spec.ts  : le fichier de test
• hello-world.component.ts  : le composant

Maintenant, lancez ng serve et ouvrez le navigateur sur localhost:4200 pour voir le résultat
Hé, mais le composant n'est pas rendu ! Pourquoi ?
Parce que nous ne l'avons pas utilisé :-)

Ouvrez maintenant le composant racine « app.component.ts » et ajoutez HelloWorlComponent dans la section « importations » :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

Le composant est désormais disponible dans AppComponent, et nous pouvons l'utiliser. Modifiez simplement le fichier hello-world.component.html et remplacez tout le code par ceci :

<app-hello-world></app-hello-world>
<router-outlet />

Oubliez router-outlet par exemple puisque nous n'avons pas empêché l'installation d'Angular Router lors de la création du projet (si vous ne souhaitez pas de routage, vous pouvez faire ceci : ng new my-new-project --routing=false )

Le préfixe du sélecteur par défaut est 'app', c'est pourquoi le sélecteur du composant est 'app-hello-world'

Vérifiez le navigateur et vous verrez le contenu par défaut de votre composant.

Vous pouvez personnaliser le CSS en ajoutant ceci à hello-world.component.scss :

:host {
 color: blueviolet
}

Vérifiez le navigateur et vous verrez la nouvelle couleur du texte. Le :host sélecteur est lié au composant hello-world actuel.

Alors maintenant, vous savez générer un composant simple

Bonne journée ?

[article original] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!