Eine kurze Analyse der Komponentenvorlagen in Angular

Dieser Artikel führt Sie durch die Komponentenvorlagen in Angular und stellt kurz die relevanten Wissenspunkte vor: Datenbindung, Eigenschaftsbindung, Ereignisbindung, bidirektionale Datenbindung, Inhaltsprojektion usw. Ich hoffe, dass er für alle nützlich ist . helfen!

Angular ist ein Framework zum Erstellen von Client-Anwendungen unter Verwendung von HTML, CSS, TypeScript Einzelseitige-Anwendungen. [Verwandte Tutorial-Empfehlungen: „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 在组件模板中获取

<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>

4.2 在组件类中获取

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

<p #paragraph>home works!</p>

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在浏览器中会被 <div class="heading test"></div>Angular Tutorial

“]

• Angular ist ein schwergewichtiges Framework, das eine große Anzahl von out-of-the-box Funktionsmodulen integriert.
• Angular wurde für die Entwicklung umfangreicher Anwendungen entwickelt und bietet eine saubere und lose gekoppelte Code-Organisationsmethode, wodurch die Anwendung aufgeräumter und einfacher zu warten ist.

angualr-Dokumentation:

Angular: https://angular.io/

Angular-Chinesisch: https://angular.cn/

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

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

🎜

🎜Komponentenvorlage🎜

🎜🎜🎜1. Datenbindung🎜🎜🎜🎜Bei der Datenbindung wird die Komponentenklasse eingefügt Die Daten werden in der Komponentenvorlage angezeigt. Wenn sich die Daten in der Komponentenklasse ändern, werden sie automatisch mit der Komponentenvorlage synchronisiert (datengesteuertes DOM). 🎜🎜Verwenden Sie interpolation expression für die Datenbindung in Angular, also {<!-- -->{ }}. 2. Attributbindung >. 🎜

🎜🎜Verwenden Sie [property name], um DOM-Objekteigenschaften an Elemente zu binden. 🎜

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

🎜🎜🎜Verwenden Sie [attr.attribute name], um HTML-Tag-Attribute an Elemente zu binden.🎜

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

🎜🎜🎜In den meisten Fällen stimmen DOM-Objektattribute und HTML-Tag-Attribute überein. Verwenden Sie daher den ersten Fall . 🎜🎜Einige Attribute existieren jedoch nur in HTML-Tags und nicht in DOM-Objekten. In diesem Fall müssen Sie den zweiten Fall verwenden, z. B. colspan-Attribute existieren nicht in DOM-Objekten. 🎜🎜Oder benutzerdefinierte HTML-Attribute müssen ebenfalls den zweiten Fall verwenden. 🎜🎜🎜2.2 Klassenattribut🎜🎜

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

🎜🎜2.3 Stilattribut🎜🎜

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

🎜🎜🎜3. Ereignisbindung🎜🎜🎜

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

rrree🎜🎜🎜4. Holen Sie sich das native DOM-Objekt🎜🎜 🎜 🎜🎜4.1 Komponentenvorlage abrufen🎜 🎜

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

🎜🎜4.2 Holen Sie sich 🎜🎜🎜Verwenden Sie den Dekorator ViewChild, um ein Element zu erhalten. 🎜rrreeerrreee🎜Verwenden Sie ViewChildren, um eine Reihe von Elementen zu erhalten Datenbindung🎜🎜🎜🎜Daten werden in Komponentenklassen und Komponentenvorlagen in beide Richtungen synchronisiert. 🎜🎜Angular platziert die bidirektionale Datenbindungsfunktion im Modul @angular/forms. Um die bidirektionale Datenbindung zu implementieren, müssen Sie sich also auf dieses Modul verlassen. 🎜rrreeerrreeerrreee🎜🎜🎜6. Inhaltsprojektion🎜🎜🎜rrreeerrreee🎜Wenn nur ein NG-Inhalt vorhanden ist, ist das SELECT-Attribut nicht erforderlich. 🎜🎜ng-content wird im Browser durch <div class="heading test"></div> ersetzt. Wenn Sie dieses zusätzliche div nicht möchten, können Sie ng verwenden -container stattdessen dieses div. 🎜🎜🎜ng-content wird normalerweise bei der Projektion verwendet: Wenn die übergeordnete Komponente Daten auf die untergeordnete Komponente projizieren muss, muss sie angeben, wo die Daten auf die untergeordnete Komponente projiziert werden sollen. Zu diesem Zeitpunkt können Sie das ng-content-Tag verwenden um einen Platzhalter zu erstellen, werden keine echten DOM-Elemente generiert, nur der projizierte Inhalt wird kopiert. 🎜🎜ng-container ist ein spezielles Container-Tag, das keine echten DOM-Elemente generiert, daher ist das Hinzufügen von Attributen zum ng-container-Tag ungültig. 🎜🎜rrreee🎜🎜🎜7. Datenbindungsfehlertoleranzverarbeitung🎜🎜🎜rrreeerrreee🎜🎜🎜8. Globaler Stil🎜🎜🎜rrreeerrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Komponentenvorlagen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!