Une brève discussion sur la connaissance de base des composants (@Component) dans 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.

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&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: '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 :

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 {
}

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!