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

이 글에서는 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 在组件模板中获取

<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는 수많은 기본 기능 모듈을 통합하는 헤비급 프레임워크입니다.
• 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 태그 속성 바인딩</code의 두 가지 상황으로 나뉩니다. >. 🎜<ul style="list-style-type: disc;">🎜🎜<code>[속성 이름]을 사용하여 DOM 객체 속성을 요소에 바인딩하세요. 🎜

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

🎜🎜🎜HTML 태그 속성을 요소에 바인딩하려면 [attr.attribute name]을 사용하세요.🎜

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

🎜🎜🎜대부분의 경우 DOM 개체 속성과 HTML 태그 속성이 일치하므로 첫 번째 사례를 사용하세요. . 🎜🎜그러나 일부 속성은 HTML 태그에만 존재하고 DOM 객체에는 존재하지 않습니다. 이 경우 colspan 속성과 같은 두 번째 경우를 사용해야 합니다. DOM 객체에는 존재하지 않습니다. 🎜🎜또는 사용자 정의 HTML 속성도 두 번째 경우를 사용해야 합니다. 🎜🎜🎜2.2 클래스 속성🎜🎜

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

🎜🎜2.3 스타일 속성🎜🎜

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

🎜🎜🎜3. 이벤트 바인딩🎜🎜🎜

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

rrreee🎜🎜🎜4. 🎜🎜4.1 구성요소 템플릿 가져오기🎜 🎜 rrreee🎜🎜4.2 가져오기 🎜🎜🎜ViewChild 데코레이터를 사용하여 요소 가져오기 🎜rrreeerrreee🎜ViewChildren을 사용하여 요소 집합 가져오기 🎜rrreeerrreee🎜🎜🎜5, 양방향 데이터 바인딩 🎜🎜🎜🎜데이터는 구성 요소 클래스와 구성 요소 템플릿에서 양방향으로 동기화됩니다. 🎜🎜Angular는 @angular/forms 모듈에 양방향 데이터 바인딩 기능을 배치하므로 양방향 데이터 바인딩을 구현하려면 이 모듈을 사용해야 합니다. 🎜rrreeerrreeerrreee🎜🎜🎜6. 콘텐츠 투영🎜🎜🎜rrreeerrreee🎜ng-content가 하나만 있는 경우 선택 속성이 필요하지 않습니다. 🎜🎜ng-content는 브라우저에서 <div class="heading test"></div>로 대체됩니다. 이 추가 div를 원하지 않으면 ng를 사용할 수 있습니다. -대신 이 div를 사용하세요. 🎜🎜🎜ng-content는 일반적으로 투영에 사용됩니다. 상위 구성 요소가 하위 구성 요소에 데이터를 투영해야 하는 경우 하위 구성 요소에 데이터를 투영할 위치를 지정해야 합니다. 이때 ng-content 태그를 사용할 수 있습니다. 실제 DOM 요소는 생성되지 않으며 투영된 콘텐츠만 복사됩니다. 🎜🎜ng-container는 실제 DOM 요소를 생성하지 않는 특수 컨테이너 태그이므로 ng-container 태그에 속성을 추가하는 것은 유효하지 않습니다. 🎜🎜rrreee🎜🎜🎜7. 데이터 바인딩 내결함성 처리🎜🎜🎜rrreeerrreee🎜🎜🎜8. 글로벌 스타일🎜🎜🎜rrreeerrreeerrreee🎜을 방문하세요: 🎜프로그래밍 비디오🎜! ! 🎜

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