導入

Angular 18.1 の登場により、このバージョンではコンパイラにエキサイティングな新機能、つまり 1 つ以上のテンプレート変数を宣言する機能が導入されました。
この機能はどのように使用されますか?また、さまざまな使用例は何ですか?

この記事は答えを目的としています。

コンパイラの最新機能: @let

Angular の最新バージョンでは、チームはコンパイラーに新しい機能を導入し、この機能は @-syntax に変換されます。

これが新しい制御フロー構文が誕生した方法です

• @もし
• @のために
• @switch

そして最近では、@let

一般的なルールとして、テンプレート変数を作成する最も簡単な方法は、

• キーワードを含む *ngIf 構造ディレクティブ キーワード

または新しい制御フロー構文を使用する

• @if キーワードを指定

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

この便利な機能により、非同期パイプの結果を変数に保存して、後からテンプレートで使用できるようになりました。

ただし、この構文ではいくつかの疑問が生じます。ここで、条件は、非同期パイプの戻り値が true であるかどうか、つまり戻り値が javascript.

この条件は、戻り値がオブジェクトまたは配列の場合に非常にうまく機能します。

ただし、戻り値が数値、特に数値 0 の場合

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

ここで @let の出番です。

@let は条件をチェックしません。単純な方法でローカル テンプレート変数を宣言できるようにするだけです

したがって、上記のコード例ははるかにシンプルかつエレガントに記述できるようになります

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

これにより、myNumber 変数が常に表示されます。

@let のさまざまな使用方法

変数宣言を使用する最も古典的なシナリオの 1 つは、複雑な式の結果を保存することです。

条件内で関数を使用することは常に推奨されません。条件での関数の使用は、マウスのわずかな動きやテンプレートの変更で関数が再評価されるという意味で、パフォーマンスに影響を与えました。

@let は、上で説明したように、評価を行わず、単にローカル変数を宣言するだけです。この変数は、依存関係の 1 つが変更された場合にのみ再評価されます。したがって、複雑な式などの式では関数を呼び出すことは悪い考えではありません。

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

シグナルで @let を使用する

@let はシグナルと互換性があり、次のように使用されます

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let と JavaScript 式

ご覧のとおり、@let は、クラスのインスタンス化などを除いて、あらゆる種類の JavaScript 式を評価するために使用できます

このようにして、算術演算子が解釈され、複数の変数を複数の異なる行または 1 行で宣言できます。

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

@let がもたらすその他の素晴らしいもの

上で説明したように、@let の動作は JavaScript の let の動作と非常に似ており、次のような利点があります

• スコープは JavaScript の let スコープのように機能します
• テンプレート内の入力干渉を改善
• 宣言される前に変数 (let) が使用されるとエラーが発生します