Angular と 15 の改善

1) inject を使用して、コンストラクターなしで Angular 14 にサービスを注入します。
以前は、サービスを注入するにはコンストラクターを持つクラスが常に必要でした:

class MyClass {
  constructor(private myService: MyService) {}
}

これで、関数とクラスの両方にサービスを注入できるようになりました。変数を宣言し、それを内部のサービス名で注入するように設定するだけです:

const myService = inject(MyService);
これは、たとえば、現在ではクラスではなく関数を使用して実行されるのが一般的なインターセプターやガードで役立ちます。

2) Angular 15 の行を保存するための自己終了タグ。
このバージョン以降、単一のタグを持つコンポーネントを使用できるようになりました:

以前は、コンポーネント タグを開いて閉じる必要がありました。

3) ショートカットを作成して、Angular でのインポートを減らします。
次のような長いインポートを行う代わりに:

「../../components/my-component」から { MyComponent } をインポートします;
次のようにインポートを短縮できます:

「@components/my-component」から { MyComponent } をインポートします;
これを実現するには、tsconfig.json ファイルに移動し、compilerOptions プロパティの下にパスを追加します。パス内で、独自のインポート ショートカットを構成できます:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

コンポーネント内でそのコンポーネントに固有のものを使用したい場合は、./ を使用して相対的にインポートし、そのリソースにアクセスすることをお勧めします。ただし、親フォルダーにアクセスする場合は、@ ショートカットを使用します。問題が発生した場合は、Visual Studio Code を閉じて再度開く必要がある場合があります。これらの小さな詳細は、コードを可能な限り整理した状態に保つのに違いをもたらします。

4) Angular 15 の NgOptimizedImage ディレクティブを使用して画像の読み込みを最適化します。
15 個の画像を含むリストがあり、通常 [src] を使用してそれらを反復処理する場合、アプリケーションの起動時に 15 個の画像すべてを一度にロードするという問題に直面し、パフォーマンスが低下します。

これを修正するために、Angular は NgOptimizedImage ディレクティブを提供します。使用するには、インポートするだけです:

「@angular/common」から { NgOptimizedImage } をインポートします;
[src] の代わりに [ngSrc] を使用してください。これにより、画像が遅延して読み込まれ、パフォーマンスが向上します。ただし、ディレクティブには他にも多くの構成があります。遅延読み込みのみが必要な場合は、loading="lazy" 属性を使用することをお勧めします。これは HTML 標準の一部であり、すべてのブラウザーと互換性があります。

推奨事項: メニューの上部にメイン画像がある場合は、アプリを開いたときに最初に読み込まれるため、それを遅延読み込みに設定しないでください。すぐに読み込む必要がないため、スクロールの下に表示される可能性のある画像にのみこれを適用します。

これは、パフォーマンスの向上に役立つため、優れた SEO を必要とする SSR アプリなどのパブリック アプリケーションにとって非常に重要です。

— EfisioDev による Angular コースに基づくメモ —

以上がAngular と 15 の改善の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。