ホームページ >ウェブフロントエンド >jsチュートリアル >@let: Angular 1 の新機能コンパイラー
Angular 18.1 の登場により、このバージョンではコンパイラに魅力的な新機能、つまり 1 つ以上のテンプレート変数を宣言する機能が導入されました。
この機能はどのように使用されますか?また、さまざまな使用例は何ですか?
この記事は答えを目的としています。
Angular の最新バージョンでは、チームはコンパイラーに新しい機能を導入し、この機能は @-syntax に変換されます。
これが新しい制御フロー構文が誕生した方法です
そして最近では、@let
一般的なルールとして、テンプレート変数を作成する最も簡単な方法は、
を使用することでした。または新しい制御フロー構文を使用します
<!-- older control flow syntax --> <div *ngIf="user$ |async as user"> {{ user.name }} </div> <!-- new control flow syntax --> @if(user$ |async; as user){ <div>{{ user.name }}</div> }
この便利な機能により、非同期パイプの結果を変数に保存して、後からテンプレートで使用できるようになりました。
ただし、この構文ではいくつかの疑問が生じます。ここで、条件は、非同期パイプの戻り値が true であるかどうか、つまり戻り値が JavaScript で false とみなされる値と異なるかどうかをチェックします。
この条件は、戻り値がオブジェクトまたは配列の場合に非常にうまく機能します。
ただし、戻り値が数値、特に数値 0 の場合
@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){ <div>{{ myNumber }}</div> }
ここで @let の出番です。
@let は条件をチェックしません。単純な方法でローカル テンプレート変数を宣言できるようにするだけです
そのため、上記のコード例ははるかにシンプルかつエレガントに記述できるようになります
@let myNumber = (numbers$ | async) ?? 0; <div>{{ myNumber }}</div>
これにより、myNumber 変数が常に表示されます。
変数宣言を使用する最も古典的なシナリオの 1 つは、複雑な式の結果を保存することです。
条件内で関数を使用することは常に推奨されません。条件での関数の使用は、マウスのわずかな動きやテンプレートの変更で関数が再評価されるという意味で、パフォーマンスに影響を与えました。
@let は、上で説明したように、評価を行わず、単にローカル変数を宣言するだけです。この変数は、依存関係の 1 つが変更された場合にのみ再評価されます。したがって、複雑な式などの式では、関数を呼び出すことは悪い考えではありません。
<ul> @for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user); <li>User is admin: {{ isAdmin }}</li> } </ul>
@let はシグナルと互換性があり、次のように使用されます
@let userColor = user().preferences?.colors?.primaryColor || 'white'; <span>user favorite color is {{ userColor }}</span>
ご覧のとおり、@let は、クラスのインスタンス化などを除いて、あらゆる種類の JavaScript 式を評価するために使用できます
このようにして、算術演算子が解釈され、複数の変数を複数の異なる行または 1 行で宣言できます。
<div> @for (score of scores(); track $index) { @let total = total + score, max = calcMax(score); <h1>final score: {{ total }}</h1> } </div>
上で説明したように、@let の動作は JavaScript の let の動作と非常に似ており、次のような利点があります
以上が@let: Angular 1 の新機能コンパイラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。