


Une brève discussion sur la connaissance de base des composants (@Component) dans Angular
Jun 11, 2021 am 10:44 AMCet article vous présentera les connaissances de base des composants (@Component) dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
Environnement :
- CLI angulaire : 11.0.6
- Angulaire : 11.0.7
- Nœud : 12.18.3
- npm : 6.14.6
- IDE : Visual Studio Code
Présentation1.
Les composants sont les principaux éléments constitutifs des applications angulaires. Chaque composant comprend les parties suivantes :
- Un modèle HTML utilisé pour déclarer le contenu à restituer sur la page
- Une classe Typescript utilisée pour définir le comportement
- A Sélecteur CSS, utilisé pour définir la façon dont le composant est utilisé dans le modèle
- (facultatif) Style CSS à appliquer au modèle
Le composant peut être une page ou un composant (contrôle ). Always, est un élément de page. [Tutoriels associés recommandés : "Tutoriel angulaire"]
Tout composant fait partie de NgModule, afin qu'il puisse être appelé par d'autres applications et d'autres composants. Afin de définir un composant en tant que membre de NgModule, les développeurs doivent lister le composant qu'ils ont développé dans l'attribut déclarations de NgModule.
De plus, les développeurs peuvent configurer les métadonnées via le modificateur Component (c'est-à-dire @Component), afin que les composants puissent contrôler leur environnement d'exécution via divers hooks de cycle de vie.
2. Créer un composant
Basé sur AngularCLI, un composant peut être facilement créé. Dans le répertoire où vous souhaitez créer le composant, exécutez la commande suivante
ng generate component <component-name>
par exemple ng generate component MyComponent
AngularCLI générera automatiquement un dossier et 4 fichiers :
- Un avec le composant Un dossier nommé (par exemple mon-composant)
- un fichier de composant< nom-du-composant >.component.ts (par exemple mon-component.component.ts)
- un fichier modèle< ; nom-du-composant >.component.html (par exemple mon-component.component.html)
- Un fichier CSS, <nom-du-composant >.component.css (par exemple mon-composant.component.css )
- Fichier de test<component-name>.component.spec.ts (par exemple my-component.component.spec.ts)
Pour le composant, tout le nom du fichier ajoutera automatiquement le suffixe du composant, il n'est donc pas recommandé d'inclure le mot « composant » dans <
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit { constructor() { } ngOnInit(): void { } }
Ce qui précède est le fichier ts principal, qui spécifie le sélecteur (sélecteur CSS), le fichier modèle (html) et le fichier css. Les fichiers HTML/css peuvent être partagés par plusieurs composants si nécessaire. Surtout pour les CSS, vous pouvez voir que le paramètre est Array, donc plusieurs CSS peuvent être formulés.
2.1. Modèle de composant
Le modèle de composant, c'est-à-dire la partie HTML, peut être un fichier html ou une description html. , sont équivalents. Les composants angulaires nécessitent un modèle défini avec template ou templateUrl. Mais vous ne pouvez pas avoir les deux instructions dans un composant en même temps.
1. Méthode du fichier html
@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', })
2. Méthode du code html
@Component({ selector: 'app-component-overview', template: '<h1>Hello World!</h1>', })
3. Modèle d'encapsulation de vue
Dans Angular, le style CSS d'un composant est encapsulé dans sa propre vue sans affecter les autres parties de l'application. Cette partie peut également être contrôlée via la configuration.
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', encapsulation: ViewEncapsulation.None, styleUrls: ['./my-component.component.css'] })
Comme vous pouvez le constater, un attribut encapsulation
(mode d'encapsulation de la vue) a été ajouté. Vous pouvez contrôler le mode d'encapsulation de chaque composant individuellement en définissant le mode d'encapsulation de la vue sur les métadonnées du composant. Les modes d'encapsulation facultatifs sont les suivants :
- Le mode émulé (valeur par défaut) simule le comportement de Shadow DOM en prétraitant (et en renommant) le code CSS pour limiter les styles CSS aux composants en vue. Pour plus d’informations, voir l’Annexe 1. (Remarque : seuls les styles globaux entrants et non sortants peuvent entrer, mais les styles de composants ne peuvent pas sortir)
- Le mode ShadowDom utilise l'implémentation Shadow DOM native du navigateur pour attacher un Shadow DOM à l'élément hôte du composant. La vue du composant est attachée à ce Shadow DOM, et les styles du composant sont également inclus dans ce Shadow DOM. (Explication : aucune entrée ou sortie, aucun style ne peut entrer et les styles de composants ne peuvent pas sortir.)
- Aucun signifie qu'Angular n'utilise pas l'encapsulation de vue. Angular ajoute du CSS aux styles globaux. Les règles de portée, d’isolement et de protection évoquées précédemment ne s’appliqueront pas. Essentiellement, cela revient à mettre les styles du composant directement en HTML.
3.1. Sélecteur spécial : host
Utilisez le sélecteur de pseudo-classe :host pour sélectionner l'élément hôte du composant (relatif à l'élément à l'intérieur du modèle de composant). L'option :host est le seul moyen de cibler un élément hôte. Sinon, vous ne pourrez pas le spécifier, puisque l'hôte ne fait pas partie du modèle propre du composant, mais du modèle du composant parent.
par exemple
:host { }
3.2. inline-styles
默认AngularCLI生成的component,css在一个单独文件中。当然,同html模板类似,如果需要,你也可以制定css样式写在ts中, 不单独放到一个文件中。命令:ng generate component MyComponent --inline-style
。
生成component如下
@Component({ selector: 'app-my-component', template: '<h1>Hello World!</h1>', styles: ['h1 { font-weight: normal; }'] })
4. 总结
- Angular CLI辅助创建一个component所需的多个文件
- 建议html/css/ts分开
- 在期望目录下执行Angular CLI命令,可以生成到制定目录
-
ng generate component XXX
可以简写为ng g c
更多编程相关知识,请访问:编程视频!!
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment installer le composant DirectPlay de l'ancienne version de Windows 10

Comment installer Angular sur Ubuntu 24.04

Bases du développement VUE3 : utilisation d'extensions pour hériter des composants

Comment implémenter le composant de calendrier à l'aide de Vue ?

Un article explorant le rendu côté serveur (SSR) dans Angular

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes

Comment ouvrir les paramètres de l'ancienne version des composants Win10

Un article expliquant en détail comment transférer des données entre les composants Angular parent et enfant
