각도의 구성 요소 템플릿에 대한 간략한 분석-JS 튜토리얼-php.cn

이 글에서는 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: &#39;张三&#39;
        }
    }
}

로그인 후 복사

🎜🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!