コーディング業界にしばらく携わっている場合は、動的バリエーションの開発がWebアプリケーションでかなりの作業になる可能性があることをすでにご存知でしょう。使用するプログラミングプラットフォームに応じて、複雑さのレベルは異なる傾向がありますが、幸いなことに、この偉業はAngular8およびAngularの以前のバージョンでも簡単に実現できます。この記事では、agular8のngstyleについて説明します。
Angular8のテンプレートプロパティ構文
Angular 8に付属するすべての関数とモジュールについて詳しく説明する前に、まずAngular 8のプロパティ構文と、純粋なJavaでcolorプロパティの色を変更する方法を見てみましょう。
javaがメソッドから抜け出す
let myDiv = document.getElementById（ 'my-div'）myDiv.style.color = 'orange' //プロパティを介してdivを更新
組み込みライブラリや他のモジュールを利用して、Angular8で同じタスクを実行しましょう。
プロパティ構文を使用したスタイル、このテキストはオレンジ色です
構文{property}を使用して、コードを効率的に実行し、ほぼ瞬時に変更します。
上記の例では、行ったことはdiv要素のstyleプロパティに直接アクセスされます。 DOMオブジェクトと属性のプロパティと比較すると、これは異なります。
組み込みのAngular8特性を使用して、CSS要素を任意のクラスに追加できます。これをよりよく理解するには、以下の例を参照してください。
プロパティ構文を使用するCSSクラス、このテキストは青色です
Angular8のNgClassとNgStyle
Angular 8にはngSyntaxとngClassの両方が組み込まれており、これらはさまざまな目的に合わせて使用できます。ある意味で、組み込みモジュールは、他のモジュールよりも複雑な文字列への変更を実装するための砂糖を提供します。 Angular8のngStyleの構文を見てみましょう。
ngStyleを使用したスタイル
上記の例では、AngularのngStyleを使用してクラス内の複数の要素のダイナミクスを変更し、同じグループで複数の要素を一緒に使用して、ユーザーが必要に応じてクラスをカスタマイズできるようにしました。
上記の例の続き。
ngStyleを使用したスタイル+-
ngStyleについて理解したところで、ngStyleのいくつかの要素を見てみましょう。
クラスの配列クラスの文字列クラスのオブジェクト
角度のあるngClassを使用すると、コードにさまざまな方法で変更を加えることができるため、ngStyleと同様に、動的な変更を簡単に実装できます。
javachar配列のデフォルト値
以下の例を見て、両方が実際に動作していることを確認してください。
import {Component} from '@ angular / core' @Component（{selector： 'my-app'、templateUrl： './ app.component.html'、styleUrls：['./ app.component.css']}） export class AppComponent {color = 'pink' size = 16 displayText = 'show-class'visible = trueコンストラクター（）{} token（）{this.visible =！this.visible this.displayText = this.visible？ 'show-class'： 'hide-class'}}Angular8のNgClick
ngClassとngStyleの両方の基本機能と、Angular 8プラットフォームでどちらかまたは両方を使用して何を実現できるかがわかったところで、ngClickの使用法を見てみましょう。
ngClickとは何ですか？
特定のイベントでプログラムの複数の要素をバインドして単一のタスクを実行する必要がある場合は、ngClickを使用する必要があります。
上記は、AngularJSでngClickがどのように使用されるかの例です。 Angular8に関しては、同じモジュールが存在しないため、以下を利用する必要があります。
doubleをintjavaにキャストする方法
上記の構文は、Angular8でのイベントのバインドを容易にするために使用されます。ここでは、最初にターゲットイベントの名前を括弧とともに定義し、次に引用符とequals演算子を含めてテンプレートステートメントを含めます。これらの手順が完了すると、Angular8はこのイベントのイベントハンドラーを設定し、トリガーされるたびにこのイベントが実行されます。
Angular8は、世の中で最も人気のあるプログラミング言語の1つであるだけでなく、その幅広い機能のおかげで最も動的な言語の1つでもあります。これで、角度のあるNgStyleに関するこの記事は終わりです。これらがどのように機能するかを理解していただければ幸いです。
チェックアウト Edurekaによる。 Angularは、スケーラブルでエンタープライズなパフォーマンスのクライアント側Webアプリケーションを作成するために使用されるJavaScriptフレームワークです。 Angularフレームワークの採用率が高いため、アプリケーションのパフォーマンス管理はコミュニティ主導であり、間接的により良い雇用機会を促進しています。 Angular認定トレーニングは、エンタープライズアプリケーション開発に関するこれらすべての新しい概念をカバーすることを目的としています。