Angular のコンポーネントテンプレートの簡単な分析-jsチュートリアル-php.cn

Angular のコンポーネントテンプレートの簡単な分析

青灯夜游

リリース： 2022-05-16 21:01:03

転載

2302 人が閲覧しました

この記事では、angular のコンポーネントテンプレートについて説明し、関連するナレッジポイント (データバインディング、プロパティバインディング、イベントバインディング、双方向データバインディング、コンテンツプロジェクションなど) を簡単に紹介します。お役に立てれば幸いです!

Angular のコンポーネントテンプレートの簡単な分析

Angular は、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 でのデータバインディングには

補間式

、つまり

{{ }} を使用します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><h2>{{message}}</h2> <h2>{{getInfo()}}</h2> <h2>{{a == b ? &#39;相等&#39;: &#39;不等&#39;}}</h2> <h2>{{&#39;Hello Angular&#39;}}</h2> <p [innerHTML]="htmlSnippet"></p> </pre><div class="contentsignin">ログイン後にコピー</div></div>

2. 属性バインディング

2.1 共通属性

属性バインディングは次のように分割されます。 は DOM オブジェクト属性をバインドします

と

は HTML タグ属性をバインドします の 2 つのケースです。

を使用して、DOM オブジェクトのプロパティを要素にバインドします。
```
<img [src]="imgUrl"/>
```
ログイン後にコピー
Use
HTML タグ属性を要素にバインド
```
<td [attr.colspan]="colSpan"></td>
```
ログイン後にコピー
ほとんどの場合、以下のようになります。 DOM オブジェクトの属性と HTML タグの属性は対応しているため、最初のケースが使用されます。

ただし、一部の属性は

HTML タグ

にのみ存在し、DOM オブジェクトには存在しません。この場合、

colspan## などの 2 番目のケースを使用する必要があります。 DOM オブジェクト内の # 属性だけではありません。または、カスタム HTML 属性でも 2 番目のケースを使用する必要があります。

2.2 クラス属性

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

ログイン後にコピー

2.3 スタイル属性

<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 Get

Use 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)
  }
}

ログイン後にコピー

Use 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. コンテンツの投影

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <bootstrap-panel> <div class="heading test"> Heading </div> <div class="body"> Body </div> </bootstrap-panel></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <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></pre><div class="contentsignin">ログイン後にコピー</div></div>NG コンテンツが 1 つだけの場合、select 属性は必要ありません。

ng-content は、ブラウザ内で

に置き換えられます。この余分な div が不要な場合は、 ng -container を使用してこの div を置き換えることができます。

ng-content は通常、投影で使用されます: 親コンポーネントがデータを子コンポーネントに投影する必要がある場合、データを子コンポーネントに投影する場所を指定する必要があります。 ng-content タグを使用します。プレースホルダーを作成しても実際の DOM 要素は生成されず、投影されたコンテンツがコピーされるだけです。

ng-container は実際の dom 要素を生成しない特殊なコンテナタグであるため、ng-container タグに属性を追加することは無効です。

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

ログイン後にコピー

#7. データバインディングフォールトトレランス処理

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

ログイン後にコピー

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

ログイン後にコピー

/* 第一种方式 在 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"
]

ログイン後にコピー

プログラミング関連の知識については、プログラミングビデオをご覧ください。！

以上がAngular のコンポーネントテンプレートの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Angular のコンポーネント テンプレートの簡単な分析

Angular のコンポーネントテンプレートの簡単な分析