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:php;toolbar:false;'>&lt;h2&gt;{{message}}&lt;/h2&gt; &lt;h2&gt;{{getInfo()}}&lt;/h2&gt; &lt;h2&gt;{{a == b ? &amp;#39;相等&amp;#39;: &amp;#39;不等&amp;#39;}}&lt;/h2&gt; &lt;h2&gt;{{&amp;#39;Hello Angular&amp;#39;}}&lt;/h2&gt; &lt;p [innerHTML]=&quot;htmlSnippet&quot;&gt;&lt;/p&gt; &lt;!-- 对数据中的代码进行转义 --&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><!-- -->

2. 属性バインディング

2.1 共通属性

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

と

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

[プロパティ名]
• を使用して、DOM オブジェクトのプロパティを要素にバインドします。

  <img [src]="imgUrl"/>

  Use
[attr.attribute name]
• 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:php;toolbar:false;'>&lt;!-- app.component.html --&gt; &lt;bootstrap-panel&gt; &lt;div class=&quot;heading test&quot;&gt; Heading &lt;/div&gt; &lt;div class=&quot;body&quot;&gt; Body &lt;/div&gt; &lt;/bootstrap-panel&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!-- panel.component.html --&gt; &lt;div class=&quot;panel panel-default&quot;&gt; &lt;div class=&quot;panel-heading&quot;&gt; &lt;ng-content select=&quot;.heading&quot;&gt;&lt;/ng-content&gt; &lt;/div&gt; &lt;div class=&quot;panel-body&quot;&gt; &lt;ng-content select=&quot;.body&quot;&gt;&lt;/ng-content&gt; &lt;/div&gt; &lt;/div&gt;</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: '张三'
        }
    }
}

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

#8. グローバル スタイル

/* 第一种方式 在 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 サイトの他の関連記事を参照してください。