Table des matières
2. Créer un composant
3. Modèle d'encapsulation de vue
4. 总结
Maison interface Web js tutoriel Une brève discussion sur la connaissance de base des composants (@Component) dans Angular

Une brève discussion sur la connaissance de base des composants (@Component) dans Angular

Jun 11, 2021 am 10:44 AM
angular 组件

Cet 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.

Une brève discussion sur la connaissance de base des composants (@Component) dans Angular

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>
Copier après la connexion

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&lt ; 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: &#39;app-my-component&#39;,
  templateUrl: &#39;./my-component.component.html&#39;,
  styleUrls: [&#39;./my-component.component.css&#39;]
})
export class MyComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
Copier après la connexion

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: &#39;app-component-overview&#39;,
  templateUrl: &#39;./component-overview.component.html&#39;,
})
Copier après la connexion

2. Méthode du code html

@Component({
  selector: &#39;app-component-overview&#39;,
  template: &#39;&lt;h1&gt;Hello World!&lt;/h1&gt;&#39;,
})
Copier après la connexion

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: &#39;app-my-component&#39;,
  templateUrl: &#39;./my-component.component.html&#39;,
  encapsulation: ViewEncapsulation.None,
  styleUrls: [&#39;./my-component.component.css&#39;]
})
Copier après la connexion

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 :

  1. 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)
  2. 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.)
  3. 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 {
}
Copier après la connexion

3.2. inline-styles

默认AngularCLI生成的component,css在一个单独文件中。当然,同html模板类似,如果需要,你也可以制定css样式写在ts中, 不单独放到一个文件中。命令:ng generate component MyComponent --inline-style

生成component如下

@Component({
  selector: &#39;app-my-component&#39;,
  template: &#39;&lt;h1&gt;Hello World!&lt;/h1&gt;&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Dec 28, 2023 pm 03:43 PM

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

Comment installer Angular sur Ubuntu 24.04 Comment installer Angular sur Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Comment installer Angular sur Ubuntu 24.04

Bases du développement VUE3 : utilisation d'extensions pour hériter des composants Bases du développement VUE3 : utilisation d'extensions pour hériter des composants Jun 16, 2023 am 08:58 AM

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

Comment implémenter le composant de calendrier à l'aide de Vue ? Comment implémenter le composant de calendrier à l'aide de Vue ? Jun 25, 2023 pm 01:28 PM

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

Un article explorant le rendu côté serveur (SSR) dans Angular Un article explorant le rendu côté serveur (SSR) dans Angular Dec 27, 2022 pm 07:24 PM

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 Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

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 Comment ouvrir les paramètres de l'ancienne version des composants Win10 Dec 22, 2023 am 08:45 AM

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 Un article expliquant en détail comment transférer des données entre les composants Angular parent et enfant Jan 04, 2023 pm 09:06 PM

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

See all articles