Angular の学習ではスタンドアロン コンポーネントについて説明します (Standalone Component)

この記事では、Angular の学習を継続し、Angular のスタンドアロン コンポーネント (Standalone Component) について簡単に理解することができます。

Angular 14 の興味深い機能は、Angular のスタンドアロン コンポーネントがついに登場したことです。 [関連チュートリアルの推奨事項: "angularTutorial"]

Angular 14 では、開発者は独立したコンポーネントを使用してさまざまなコンポーネントを開発することができますが、Angular の独立したコンポーネントの API はまだ安定化を行わないと、将来的に破壊的な更新が行われる可能性があるため、運用環境での使用はお勧めできません。

#基本的な使用法

##angular.io/guide/stand…

##スタンドアロンは Angular14 で新たにリリースされました特徴。

ルート モジュール AppModule がそれほど肥大化しない可能性があります

すべてのコンポーネント/パイプ/ディレクティブは、使用するときに対応するコンポーネントに導入する必要があります

たとえば、これは次のとおりです。

Footer

コンポーネント を宣言し、このコンポーネントを使用する

Module

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { Component } from &amp;#39;@angular/core&amp;#39;; @Component({ selector: &amp;#39;app-footer&amp;#39;, template: ` &lt;footer class=&quot;dark:bg-gray-800 dark:text-gray-50&quot;&gt;Footer&lt;/footer&gt; `, }) export class FooterComponent {}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { NgModule } from &amp;#39;@angular/core&amp;#39;; import { CommonModule } from &amp;#39;@angular/common&amp;#39;; import { FooterComponent } from &amp;#39;./footer.component&amp;#39;; @NgModule({ declarations: [HomeComponent, FooterComponent], exports: [], imports: [CommonModule], }) export class AppModuleModule {}</pre><div class="contentsignin">ログイン後にコピー</div></div> にインポートします。このメソッドでは

NgModule

を削除できませんが、実際の目的は、

AppComponent# の

FooterComponent に置き換えることです。 ##React

の記述方法は実際には管理と理解が容易になります

新しい機能を使用しますスタンドアロン

フッター コンポーネントが変換されますこのように

import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  // 将该组件声明成独立组件
  standalone: true,
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

その後、たとえばホーム ページでは次のように使用できます

import { Component } from '@angular/core';

import { FooterComponent } from '@components/footer/footer.component';

@Component({
  selector: 'app-home',
  standalone: true,
  // 声明需要使用的 component / pipe / directive 但是它们也必须都是独立组件
  imports: [FooterComponent],
  template: `<app-footer></app-footer>`,
})
export class WelcomeComponent {}

独立したコンポーネントを遅延読み込みに直接使用できます。当初は

を実現するには NgModule を使用する必要がありました

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CustomPreloadingStrategy } from '@views/basic-syntax/router/customPreloadingStrategy';

const routes: Routes = [
  {
    path: 'home',
    // 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁
    loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

プログラミング関連の知識をさらに知りたい場合は、

プログラミング教育

をご覧ください。 ！

以上がAngular の学習ではスタンドアロン コンポーネントについて説明します (Standalone Component)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。