Angular の強化されたテンプレート構文と合理化された移行

Angular 18.2 が到着しました。これはマイナー リリースですが、開発者のエクスペリエンスを向上させる貴重な改善がいくつか含まれています。この記事では、洗練された @let 構文と新しい移行スキームの導入に焦点を当てて、これらのエキサイティングな機能について詳しく説明します。

@let の改善

多くの Angular 開発者の間で個人的にお気に入りの @let 構文は、18.2 でも進化し続けています。テンプレート変数を定義するための 2 つの異なるアプローチを提供し、コードの柔軟性と可読性を高めます。

Dynamic @let: @for および @if ディレクティブ内でテンプレート参照変数を利用する機能を採用します。テンプレート内のフォームの値に簡単にアクセスできるところを想像してみてください:

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let: 以前のバージョンでは、オブザーバブルから出力された最新の値にアクセスするには ngIf ディレクティブが必要でした。

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

今度は、線数を減らして鮮明さを向上させて同じ結果を実現します

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

@let 変数は読み取り専用であり、再割り当てできないことに注意してください。ただし、それらの値は変更検出サイクルごとに自動的に更新されます。テンプレートとクラス コンポーネント内で同じ名前を使用することは技術的には可能ですが、この方法による長期的な影響については、さらなる調査が必要です。

移行が簡単に: 街の新しい回路図

Angular 17 からは、次の 3 つの主要な移行図が登場しました。

• テンプレート構文制御フロー: ng g @angular/core:control-flow
• 新しいアプリビルダー: ng update @angular/cli --name use-application-builder
• スタンドアロンコンポーネント: ng g @angular/core:standalone

Angular 18.2 では、このツールキットがさらに便利なツールで拡張されています。

• スタンドアロン コンポーネントのルート変換: ng g @angular/core:route-lazy-loading を使用して、スタンドアロン コンポーネントから遅延ロードされたルートを簡単に作成します。
• DI 移行: ng g @angular/core:inject-migration を使用して、コンストラクターベースの依存関係注入から新しい関数型 inject() アプローチへの移行を簡素化します。

結論と今後の展望

Angular 18.2 はマイナー リリースかもしれませんが、@let の使用を楽しみ、合理化された移行プロセスを評価する人にとっては大幅な改善が提供されます。私たちは 2024 年 11 月に Angular 19 に予定されている主要な機能を心待ちにしているため、今後 6 週間以内にリリースされるバージョン 18.3 は、新たなエキサイティングな足がかりとなることが期待されています。したがって、落ち着いてコーディングを続け、Angular の進歩を受け入れてください!

以上がAngular の強化されたテンプレート構文と合理化された移行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。