ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

Angular の独立したコンポーネントの簡単な分析とその使用方法を説明します。

著者：Eve Cole 更新時間：2022-06-29 10:24:51
この記事では、Angular の独立コンポーネント、Angular での独立コンポーネントの作成方法、および既存のモジュールを独立コンポーネントにインポートする方法について説明します。お役に立てば幸いです。

Angular 14 のエキサイティングな機能の 1 つは、Angular のスタンドアロン コンポーネントがついに登場したことです。

Angular 14 では、開発者は独立したコンポーネントを使用してさまざまなコンポーネントを開発することができますが、Angular の独立したコンポーネントの API はまだ安定しておらず、将来的には破壊的な更新が行われる可能性があるため、推奨されません。本番環境で使用します。 [関連チュートリアルの推奨:「angular チュートリアル」]

独立したコンポーネントを作成する方法。

既存のコンポーネントの場合は、 standalone: true を@Component()に追加すると、 @NgModule()を使用せずにimportsを直接使用できます。他のモジュールをインポートします。 。 新しいコンポーネントを作成している場合は、 ng generate component <name> --standaloneコマンドを使用して、独立したコンポーネントを直接作成できます。たとえば、次のようになり

ます
。
  セレクター: 'アプリボタンリスト',  
  スタンドアロン: 確かに、  
  輸入品: [
    共通モジュール、
  ]、  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
imports クラス ButtonListComponent は OnInit を実装し、

独立したコンポーネントに既存のモジュールをインポートします。

MatButtonModule例として、既存のモジュールをimportsに追加できます

。
    共通モジュール、
    マットボタンモジュール、
] を使用して、

ButtonListComponentでMatButtonModuleのmat-buttonコンポーネントを使用できるようにします:

<button mat-button>Basic</button>
<button mat-button color="primary">プライマリ</button>
<button mat-button color="accent">アクセント</button>
<button mat-button color="warn">警告</button>
<button mat-buttondisabled>無効化</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">リンク</a>

レンダリング:

1.png

独立したコンポーネントを使用して Angular アプリケーションを開始する

最初のステップは

、 AppComponent独立したコンポーネントとして設定することです。

@Component({
  セレクター: 'アプリルート',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  スタンドアロン: 確かに、
})
2 番目のステップは、 
AppModule

AppModuleインポートにインポートされたモジュールをAppComponentのインポートに追加することですが、 BrowserModuleとBrowserAnimationsModule 2 つのモジュール例外があります。

インポートすると問題が発生する可能性があります: ** BrowserModuleすでにロードされています。NgIf や NgFor などの共通ディレクティブにアクセスする必要がある場合は、代わりにCommonModuleをインポートしてください。**:

2.png

3 番目のステップは、 app.module.tsファイルを削除することです。

最後のステップは、 main.tsにインポートすることです。

import { platformBrowserDynamic } from '@angular/platform-b​​rowser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err)); は
次

のように変更されました:

bootstrapApplication(AppComponent).catch(err => console.error(err));

このようにして、独立したコンポーネントを使用して Angular コンポーネントを起動できます。

独立したコンポーネントのルーティングを構成します。

ここにはHomeComponent 、 ButtonListComponent 、 ChipListComponentという 3 つの独立したコンポーネントがあり

、 main.tsにROUTESオブジェクト const ROUTES を作成します

。 Route[] = [
  {
      パス： ''、    
      パスマッチ: 'フル'、    
      リダイレクト先: 'ホーム'
  }、
  {
      パス: 'ホーム'、    
      コンポーネント:ホームコンポーネント
  }、
  {
      パス: 'ボタン',    
      ロードコンポーネント: () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ）、
  }、
  {
      パス: 'チップ'、    
      ロードコンポーネント: () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ）、
  }、
];

このうち、 ButtonListComponentとChipListComponent loadComponent使用してルートの遅延ロードを実装します。

次に、 providersを使用して、 bootstrapApplicationの 2 番目のパラメーターにRouterModule登録します。

bootstrapApplication(AppComponent, {
  プロバイダー: [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ]、
}).catch(err

=

> console.error(err));

3.gif

依存関係の注入の構成

Angular アプリケーションを開始する場合、いくつかの値またはサービスを注入する必要がある場合があります。 bootstrapApplicationでは、 providersを通じて値やサービスを登録できます。

たとえば、写真を取得するための URL があり、これをPhotoServiceに挿入する必要があります。

bootstrapApplication(AppComponent, {
  プロバイダー: [
    {
          提供: 'photoUrl'、      
          useValue: 'https://picsum.photos',
    }、
    {provide: PhotosService、useClass: PhotosService }、
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
    importProvidersFrom(HttpClientModule)
  ]、
})

PhotoServiceコードは次のとおりです:

@Injectable()export class PhotosService {
  コンストラクタ（
    @Inject('photoUrl') プライベート photoUrl: 文字列、
    プライベート http: HttpClient ) { }

  public getPhotoUrl(i: 数値): string {
      `${this.photoUrl}/200/300?random=${i}` を返します。
  }
}

ソースコード

この記事で使用したソースコード: https://github.com/damingerdai/angular-standalone-components-app

オンラインデモ: https://damingerdai.github.io/angular-standalone-components-app/

原文住所：https://juejin.cn/post/7107224235914821662
関連記事