ホームページ > 記事 > ウェブフロントエンド > Angular のコンポーネント テンプレートの簡単な分析
この記事では、angular のコンポーネント テンプレートについて説明し、関連するナレッジ ポイント (データ バインディング、プロパティ バインディング、イベント バインディング、双方向データ バインディング、コンテンツ プロジェクションなど) を簡単に紹介します。お役に立てれば幸いです!
Angular は、HTML
、CSS
、TypeScript
# を使用して構築された クライアント##です
シングルページ アプリケーションを構築するためのフレームワーク。 [関連チュートリアルの推奨事項: "
angular チュートリアル"]
すぐに使用できる#を多数統合する 重量級のフレームワークです## 関数モジュール。
Angular は大規模なアプリケーション開発向けに設計されており、クリーンで疎結合なコード編成方法を提供することで、アプリケーションを整理して保守しやすくします。
Angular CLI 中国語: https://angular.cn/ cli
データ バインディングでは、コンポーネント クラスのデータがコンポーネント テンプレートに表示され、コンポーネント クラスのデータが変更されると、自動的にコンポーネント テンプレートに同期されます (データドリブン DOM)。
Angular でのデータ バインディングには補間式
、つまり{{ }}
を使用します。 <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><!-- -->
2.1 共通属性
属性バインディングは次のように分割されます。 は DOM オブジェクト属性をバインドします
と は HTML タグ属性をバインドします の 2 つのケースです。
<img [src]="imgUrl"/>
Use <td [attr.colspan]="colSpan"></td>
ほとんどの場合、以下のようになります。 DOM オブジェクトの属性と HTML タグの属性は対応しているため、最初のケースが使用されます。 HTML タグ
にのみ存在し、DOM オブジェクトには存在しません。この場合、colspan## などの 2 番目のケースを使用する必要があります。 DOM オブジェクト内の # 属性だけではありません。 または、カスタム HTML 属性でも 2 番目のケースを使用する必要があります。
<button class="btn btn-primary" [class.active]="isActive">按钮</button> <div [ngClass]="{'active': true, 'error': true}"></div>
2.3 スタイル属性
<button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button> <button [ngStyle]="{'backgroundColor': 'red'}">按钮</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 Get
Use 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) } }
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. コンテンツの投影
<pre class="brush:js;toolbar:false;"><!-- app.component.html -->
<bootstrap-panel>
<div class="heading test">
Heading
</div>
<div class="body">
Body
</div>
</bootstrap-panel></pre><pre class="brush:js;toolbar:false;"><!-- 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></pre>
NG コンテンツが 1 つだけの場合、select 属性は必要ありません。
ng-content は、ブラウザ内で 85145f3ac021a7af50e4bec73cd7392a16b28748ea4df4d9c2150843fecfba68 に置き換えられます。この余分な 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: '张三' } } }
<!-- 方式一 --> <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 サイトの他の関連記事を参照してください。