집 > 기사 > 웹 프론트엔드 > 각도의 구성 요소 템플릿에 대한 간략한 분석

각도의 구성 요소 템플릿에 대한 간략한 분석

青灯夜游앞으로: 2022-05-16 11:02:372255검색

이 글에서는 angular의 구성 요소 템플릿을 살펴보고 데이터 바인딩, 속성 바인딩, 이벤트 바인딩, 양방향 데이터 바인딩, 콘텐츠 프로젝션 등 관련 지식 포인트를 간략하게 소개합니다. 모든 사람에게 유용할 수 있기를 바랍니다. . 돕다!

Angular는 HTML, CSS, TypeScript를 사용하여 클라이언트 애플리케이션을 빌드하기 위한 프레임워크입니다. 단일 페이지 애플리케이션. [관련 튜토리얼 추천: "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在浏览器中会被 409fc00dd2f3a4349e9608687cb8360d16b28748ea4df4d9c2150843fecfba68angular Tutorial

Angular는 수많은 기본 기능 모듈을 통합하는 헤비급 프레임워크입니다.
Angular는 대규모 애플리케이션 개발을 위해 설계되었으며 깔끔하고 느슨하게 결합된 코드 구성 방법을 제공하여 애플리케이션을 깔끔하고 유지 관리하기 쉽게 만듭니다.

angualr 문서:

Angular: https://angular.io/

Angular 중국어: https://angular.cn/

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

Angular CLI 중국어: https://angular.cn/cli

🎜

🎜Component Template🎜

🎜🎜🎜1 데이터 바인딩🎜🎜🎜🎜데이터 바인딩은 The에 구성 요소 클래스를 추가하는 것입니다. 데이터는 구성 요소 템플릿에 표시됩니다. 구성 요소 클래스의 데이터가 변경되면 자동으로 구성 요소 템플릿(데이터 기반 DOM)에 동기화됩니다. 🎜🎜Angular의 데이터 바인딩에는 보간 표현식, 즉 {{ }}을 사용하세요. 🎜

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

🎜🎜🎜2. 속성 바인딩🎜🎜🎜🎜🎜2.1 일반 속성🎜🎜🎜속성 바인딩은 DOM 객체 속성 바인딩과 HTML 태그 속성 바인딩의 두 가지 상황으로 나뉩니다. >. 🎜

[속성 이름]

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: &#39;张三&#39;
        }
    }
}

[attr.attribute name]

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

HTML 태그에만 존재

colspan

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

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

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

ViewChild

ViewChildren

@angular/forms

290914cdcad83023eae6a5478da7e0ba16b28748ea4df4d9c2150843fecfba68

위 내용은 각도의 구성 요소 템플릿에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：각도의 형태에 대한 깊은 이해(반응형 및 템플릿 기반)다음 기사：각도의 형태에 대한 깊은 이해(반응형 및 템플릿 기반)