Cet article vous présentera le modèle de directive structurelle dansAngularet vous présentera ce qu'est la directive structurelle et comment l'utiliser. J'espère qu'il vous sera utile !
DansAngular, il existe deux types de directives.Angular中，有两种类型的指令。属性指令修改DOM元素的外观或者行为。结构指令添加或者移除DOM元素。
结构指令是Angular中最强大的特性之一，然而它们却频繁被误解。
如果你对学习结构指令感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。【相关教程推荐：《angular教程》】
在本文中，你将学到关于Angular结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。
学完本文，你将更好理解这些指令并在实际项目中使用它们。
Angular结构指令是能够更改DOM结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有*符号。
在Angular中，有三种标准的结构化指令。
*ngIf- 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）*ngFor- 遍历数组*ngSwitch- 渲染每个匹配的是图下面?是一个结构化指令的例子。语法长这样：
条件语句必须是true或者false。
{{worker.name}}
要使用结构指令，我们需要在 我们添加些简单的 我们根据条件来使用 当表达式是 完整的 Good morning to you,click the button to view Today is Monday and this is a dummy text element to make you feel better Understanding the ngIf directive with the else clause 我们使用 我们的组件 译者加：这个指令实际开发很有用 我们使用 cups Vegetables Trousers My Shopping 在 我们有一个 当条件值是 如果你想在 Directives structurellesAjoutez ou supprimez des éléments Les directives structurelles sont une partie très importante de J'espère qu'à travers cet article, les lecteurs pourront mieux comprendre comment utiliser ces instructions et quand utiliser ces modes. Cet article est une traduction, sous forme de traduction libre. Adresse originale : https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/ Plus de connaissances liées à la programmation, Veuillez visiter :Vidéos de programmation! ! 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!Angular生成一个*ngIf指令。这会将其转换为方括号[]中的属性绑定，比如[ngIf]。的其余部分，包含类名，插入到
Angular 结构指令是怎么工作的？
HTML模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。结构指令的例子
HTML代码。app.component.html文件内容如下：
Welcome
Copier après la connexion
怎么使用
*ngIf指令*ngIf来确定展示或者移除一个元素。ngIf跟if-else很类似。false的时候，*ngIf指令移除HTML元素。当为true时候，元素的副本会添加到DOM中。*ngIf代码如下：
Hello
Copier après la connexion
怎么使用
*ngFor指令*ngFor指令来遍历数组。比如：
Copier après la connexion
TypeScript文件：
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-illustrations', templateUrl: './illustrations.component.html', styleUrls: ['./illustrations.component.css'] }) export class IllustrationsComponent implements OnInit { workers: any = [ 'worker 1', 'worker 2', 'worker 3', 'worker 4', 'worker 5', ] constructor() { } ngOnInit(): void { } }
Copier après la connexion
怎么使用
*ngSwitch指令
ngSwitch来根据不同条件声明来决定渲染哪个元素。*ngSwitch指令很像我们使用的switch语句。比如：
Copier après la connexion
typescript中：
Myshopping: string = '';
Copier après la connexion
MyShopping变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。true的时候，相关的元素就会被渲染到DOM中，其余的元素将被忽略。如果没有元素匹配，则渲染*ngSwitchDefault的元素到DOM中。Angular 中我们什么时候需要用结构指令呢？
DOM中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素CSSDirective d'attributDOM.
DOM. LesAngular, mais elles sont souvent mal comprises. Si vous souhaitez apprendre les directives structurelles, lisons la suite et apprenons ce qu'elles sont, à quoi elles servent et comment les utiliser dans vos projets. [Recommandations de didacticiel associées : "Tutoriel angulaire"]
Qu'allez-vous apprendre
Dans cet article, vous découvrirez
Angular code> Points de connaissance du modèle d'instruction structurelle. Vous saurez ce qu'ils sont et comment les utiliser. Après avoir étudié cet article, vous comprendrez mieux ces instructions et les utiliserez dans des projets réels. Que sont les directives structurelles angulaires ?
Les directives structurelles Angularsont des directives qui peuvent changer la structure du
DOM. Ces directives
ajoutent, suppriment ou remplacent des éléments. Les directives structurelles ont des symboles
*avant leur nom. Dans
Angular, il existe trois directives structurées standards.
Ce qui suit est un exemple de directive structurée. La syntaxe ressemble à ceci : rrreeeL'instruction conditionnelle doit être
*ngIf- Inclut conditionnellement un modèle (c'est-à-dire un modèle de rendu conditionnel) basé sur la valeur booléenne renvoyée par l'expression*ngFor - Parcourir le tableau*ngSwitch- Rendre chaque image correspondantetrueou
false. rrreee
Angulargénère un élément
*ngIf. Cela le convertit en une liaison de propriété entre crochets
[], telle que
[ngIf]. Le reste de
, y compris le nom de la classe, est inséré dans
Comment fonctionnent les directives structurelles angulaires ?
Pour utiliser les directives structurelles, nous devons ajouter un élément avec la directive dans le modèle
HTML. Ensuite, ajoutez, supprimez ou remplacez des éléments en fonction des conditions ou expressions que nous avons définies dans la directive.
Exemple de directives structurelles
Nous ajoutons du code
HTMLsimple.
app.component.htmlLe contenu du fichier est le suivant : rrreee
Comment utiliser le
Nous utilisons
*ngIfcommand*ngIfpour déterminer s'il faut afficher ou supprimer un élément en fonction des conditions.
ngIfest très similaire à
if-else. Lorsque l'expression est
false, la directive
*ngIfsupprime l'élément
HTML. Lorsque
true, une copie de l'élément est ajoutée au
DOM. Le code
*ngIfcomplet est le suivant : rrreee
Comment utiliser la commande
*ngForh4>us Utilisez la directive*ngForpour parcourir un tableau. Par exemple : rrreeeNotre fichierTypeScriptde composant : rrreeeComment utiliser la directive
*ngSwitchh4>
Traducteur ajouté : cette commande est très utile dans le développement réel
Nous utilisonsngSwitchpour décider quel élément rendre en fonction de différentes instructions conditionnelles. La directive*ngSwitchressemble beaucoup à l'instructionswitchque nous utilisons. Par exemple : rrreeeDanstypescript: rrreeeNous avons une variableMyShoppingqui a une valeur par défaut utilisée pour restituer des éléments spécifiques qui répondent à la condition dans le module . Lorsque la valeur de la condition esttrue, les éléments pertinents seront rendus dansDOMet les éléments restants seront ignorés. Si aucun élément ne correspond, l'élément*ngSwitchDefaultest rendu dansDOM.Quand devons-nous utiliser des directives structurelles dans Angular ?
Si vous souhaitez ajouter ou supprimer un élément dans
DOM, vous devez utiliser des directives de structure. Bien sûr, nous pouvons également les utiliser pour modifier les styles d'éléments
CSSou ajouter des écouteurs d'événements. Vous pouvez même les utiliser pour créer un nouvel élément qui n'existait pas auparavant. La meilleure règle est la suivante : Lorsque nous pensons à manipuler le DOM, il est temps d'utiliser des directives structurelles.
Résumé
Angularet nous pouvons les utiliser de plusieurs manières.
Étiquettes associées：
source：juejin.cn
Article précédent：[Compilation et partage] Quelques frameworks de tests utilisables dans Node.js
Article suivant：5 erreurs de mémoire JavaScript courantes
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
Derniers articles par auteur
2023-04-26 17:59:18
2023-04-26 17:47:48
2023-04-26 17:41:42
2023-04-26 17:37:05
2023-04-26 17:31:25
2023-04-26 17:27:32
2023-04-25 19:57:58
2023-04-25 19:53:11
2023-04-25 19:49:11
2023-04-25 19:41:54
Derniers numéros
Rubriques connexes
Plus>
Comment acheter du Ripple en Chine
utilisation de la fonction de palette de couleurs
Méthode de production de rapports Intouch
Comment implémenter la fonction de pagination jsp
Le dossier appdata peut-il être supprimé ?
Comment résoudre l'erreur de base de données Discuz
Le sens de la construction de sites web européens et américains
Comment ouvrir le fichier ofd
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
