Une brève analyse des modèles de composants en angulaire

Cet article vous présentera les modèles de composants dans angular et présentera brièvement les points de connaissances pertinents : liaison de données, liaison de propriétés, liaison d'événements, liaison de données bidirectionnelle, projection de contenu, etc. J'espère qu'il sera utile à tout le monde . aide!

Angular est un framework pour créer des applications clientes en utilisant HTML, CSS, TypeScript. Applications d'une seule page. [Recommandations de didacticiel associées : "HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。【相关教程推荐：《angular教程》】

Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。

Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。

angualr文档：

• Angular：https://angular.io/

• Angular 中文：https://angular.cn/

• Angular CLI：https://cli.angular.io/

• Angular CLI 中文：https://angular.cn/cli

组件模板

1、数据绑定

数据绑定就是将组件类中的数据显示在组件模板中，当组件类中的数据发生变化时会自动被同步到组件模板中（数据驱动 DOM ）。

在 Angular 中使用插值表达式进行数据绑定，即 {<!-- -->{ }} 。

<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? &#39;相等&#39;: &#39;不等&#39;}}</h2>
<h2>{{&#39;Hello Angular&#39;}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->

2、属性绑定

2.1 普通属性

属性绑定分为两种情况，绑定 DOM 对象属性和绑定HTML标记属性。

• 使用 [属性名称] 为元素绑定 DOM 对象属性。

  <img [src]="imgUrl"/>

• 使用 [attr.属性名称] 为元素绑定 HTML 标记属性

  <td [attr.colspan]="colSpan"></td>

在大多数情况下，DOM 对象属性和 HTML 标记属性是对应的关系，所以使用第一种情况。

但是某些属性只有 HTML 标记存在，DOM 对象中不存在，此时需要使用第二种情况，比如 colspan 属性，在 DOM 对象中就没有。

或者自定义 HTML 属性也需要使用第二种情况。

2.2 class 属性

<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{&#39;active&#39;: true, &#39;error&#39;: true}"></div>

2.3 style 属性

<button [style.backgroundColor]="isActive ? &#39;blue&#39;: &#39;red&#39;">按钮</button>
<button [ngStyle]="{&#39;backgroundColor&#39;: &#39;red&#39;}">按钮</button>

3、事件绑定

<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向组件类的实例对象
    this.title // "test"
  }
}

4、获取原生 DOM 对象

4.1 在组件模板中获取

3b39778b4d3d5bec9ef88483dd2ffc49

4.2 在组件类中获取

使用 ViewChild 装饰器获取一个元素

d9e1532bd77523d7523e227ff359de85home works!94b3e26ee717c64999d7867364b1b4a3

import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"

export class HomeComponent implements AfterViewInit {
  @ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit() {
    console.log(this.paragraph?.nativeElement)
  }
}

使用 ViewChildren 获取一组元素

<ul>
  <li #items>a</li>
  <li #items>b</li>
  <li #items>c</li>
</ul>

import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styles: []
})
export class HomeComponent implements AfterViewInit {
  @ViewChildren("items") items: QueryList<HTMLLIElement> | undefined
  ngAfterViewInit() {
    console.log(this.items?.toArray())
  }
}

5、双向数据绑定

数据在组件类和组件模板中双向同步。

Angular 将双向数据绑定功能放在了 @angular/forms 模块中，所以要实现双向数据绑定需要依赖该模块。

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

<input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div>

export class AppComponent {
  username: string = ""
  change() {
    this.username = "hello Angular"
  }
}

6、内容投影

<!-- app.component.html -->
<bootstrap-panel>
	<div class="heading test">
        Heading
  </div>
  <div class="body">
        Body
  </div>
</bootstrap-panel>

<!-- panel.component.html -->
<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>

如果只有一个ng-content，不需要select属性。

ng-content在浏览器中会被 409fc00dd2f3a4349e9608687cb8360d16b28748ea4df4d9c2150843fecfba68Tutoriel angulaire

"]

• Angular est un framework lourd qui intègre un grand nombre de modules fonctionnels prêts à l'emploi.
• Angular est conçu pour le développement d'applications à grande échelle, fournissant une méthode d'organisation du code propre et faiblement couplée, rendant l'application ordonnée et plus facile à maintenir.

documentation angulr :

Angular : https://angular.io/

Angular chinois : https://angular.cn/

Angular CLI : https://cli.angular.io /

Angular CLI chinois : https://angular.cn/cli

🎜

🎜Modèle de composant🎜

🎜🎜🎜1. Liaison de données🎜🎜🎜🎜La liaison de données consiste à ajouter des classes de composants au les données sont affichées dans le modèle de composant. Lorsque les données de la classe de composant changent, elles seront automatiquement synchronisées avec le modèle de composant (DOM basé sur les données). 🎜🎜Utilisez expression d'interpolation pour la liaison de données dans Angular, c'est-à-dire {<!-- -->{ }}. 🎜

<!-- app.component.html -->
<bootstrap-panel>
	<ng-container class="heading">
        Heading
    </ng-container>
    <ng-container class="body">
        Body
    </ng-container>
</bootstrap-panel>

🎜🎜🎜2. Liaison d'attributs🎜🎜🎜🎜🎜2.1 Attributs ordinaires🎜🎜🎜La liaison d'attributs est divisée en deux situations, liaison des attributs d'objet DOM et liaison des propriétés des balises HTML. 🎜

🎜🎜Utilisez [property name] pour lier les propriétés des objets DOM aux éléments. 🎜

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: '张三'
        }
    }
}

🎜🎜🎜Utilisez [attr.attribute name] pour lier les attributs de balise HTML aux éléments🎜

<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>

🎜🎜🎜Dans la plupart des cas, les attributs d'objet DOM et les attributs de balise HTML correspondent, utilisez donc le premier cas . 🎜🎜Mais certains attributs n'existent que dans les balises HTML et n'existent pas dans les objets DOM. Dans ce cas, vous devez utiliser le deuxième cas, comme les attributs colspan, qui. n'existent pas dans les objets DOM. 🎜🎜Ou les attributs HTML personnalisés doivent également utiliser le deuxième cas. 🎜🎜🎜2.2 attribut de classe🎜🎜

/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */

🎜🎜2.3 attribut de style🎜🎜

<!-- 第二种方式 在 index.html 文件中  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

🎜🎜🎜3. Liaison d'événement🎜🎜🎜

// 第三种方式 在 angular.json 文件中
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

rrreee🎜🎜🎜4. Obtenez l'objet DOM natif🎜🎜. 🎜 🎜🎜4.1 Accédez au modèle de composant🎜 🎜 rrreee🎜🎜4.2 Obtenez 🎜🎜🎜Utilisez le décorateur ViewChild pour obtenir un élément 🎜rrreeerrreee🎜Utilisez ViewChildren pour obtenir un ensemble d'éléments 🎜rrreeerrreee🎜🎜🎜5, bidirectionnel liaison de données🎜🎜🎜🎜Les données sont synchronisées dans les deux sens dans les classes de composants et les modèles de composants. 🎜🎜Angular place la fonction de liaison de données bidirectionnelle dans le module @angular/forms, donc pour implémenter la liaison de données bidirectionnelle, vous devez vous appuyer sur ce module. 🎜rrreeerrreeerrreee🎜🎜🎜6. Projection de contenu🎜🎜🎜rrreeerrreee🎜S'il n'y a qu'un seul ng-content, l'attribut select n'est pas requis. 🎜🎜ng-content sera remplacé par 290914cdcad83023eae6a5478da7e0ba16b28748ea4df4d9c2150843fecfba68 dans le navigateur. Si vous ne voulez pas de ce div supplémentaire, vous pouvez utiliser ng. -conteneur à la place. 🎜🎜🎜ng-content est généralement utilisé en projection : lorsque le composant parent doit projeter des données sur le composant enfant, il doit spécifier où projeter les données sur le composant enfant. À ce stade, vous pouvez utiliser la balise ng-content. pour créer un espace réservé. Aucun élément DOM réel ne sera généré, seul le contenu projeté sera copié. 🎜🎜ng-container est une balise de conteneur spéciale qui ne génère pas de vrais éléments DOM, donc l'ajout d'attributs à la balise ng-container n'est pas valide. 🎜🎜rrreee🎜🎜🎜7. Traitement de tolérance aux pannes de liaison de données🎜🎜🎜rrreeerrreee🎜🎜🎜8. Style global🎜🎜🎜rrreeerrreeerrreee🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo 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!