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

この記事では、Angular の独立コンポーネントを理解し、Angular で独立コンポーネントを作成する方法、および独立コンポーネントに既存のモジュールをインポートする方法を説明します。みんな。 ！

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

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

独立したコンポーネントの作成方法

既存のコンポーネントの場合は、## 追加 standalone: true を #@Component() に設定すると、imports を直接使用して、@NgModule() モジュールを使用せずに他のものをインポートできます。 新しいコンポーネントを作成している場合は、nggenerateComponent --standalone コマンドを使用して、独立したコンポーネントを直接作成できます (例:

ng generate component button-list --standalone

@Component({
  selector: 'app-button-list',  
  standalone: true,  
  imports: [
    CommonModule,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
export class ButtonListComponent implements OnInit

Import)独立したコンポーネント内の既存のコンポーネント 一部のモジュール

では、

imports に既存のモジュールを追加できます。例として MatButtonModule を取り上げます:

imports: [
    CommonModule,
    MatButtonModule,
],

このようにして、

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

<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

Rendering:

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

最初のステップは、

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

@Component({
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  standalone: true,
})
export class AppComponent {

2 番目のステップでは、

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

インポートすると、**

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

3 番目のステップは、

app.module.ts ファイルを削除することです

最後のステップは、 ## In #main.ts

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { platformBrowserDynamic } from &amp;#39;@angular/platform-browser-dynamic&amp;#39;; platformBrowserDynamic().bootstrapModule(AppModule) .catch(err =&gt; console.error(err));</pre><div class="contentsignin">ログイン後にコピー</div></div> は次のように変更されます:

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

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

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

ここには 3 つの独立したコンポーネントがあります:

HomeComponent

、ButtonListComponent、 ChipListComponent , そして、

main.ts

に ROUTES オブジェクト

const ROUTES: Route[] = [
  {
      path: '',    
      pathMatch: 'full',    
      redirectTo: 'home'
  },
  {
      path: 'home',    
      component: HomeComponent
  },
  {
      path: 'button',    
      loadComponent: () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      path: 'chip',    
      loadComponent: () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

を作成します。ここで、

ButtonListComponent

と ChipListComponentloadComponent を使用して、ルートの遅延読み込みを実装します。 次に、

providers

を使用して、bootstrapApplication の 2 番目のパラメーターに RouterModule を登録します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">bootstrapApplication(AppComponent, { providers: [ importProvidersFrom(RouterModule.forRoot([...ROUTES])), ], }).catch(err =&gt; console.error(err));</pre><div class="contentsignin">ログイン後にコピー</div></div>レンダリング:

Configuration dependency Injection

Angular アプリケーションを開始する場合、いくつかの値またはサービスの注入が必要になる場合があります。

bootstrapApplication

では、providers を通じて値またはサービスを登録できます。 たとえば、写真を取得するための URL があり、これを

PhotoService

に挿入する必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">bootstrapApplication(AppComponent, { providers: [ { provide: &amp;#39;photoUrl&amp;#39;, useValue: &amp;#39;https://picsum.photos&amp;#39;, }, {provide: PhotosService, useClass: PhotosService }, importProvidersFrom(RouterModule.forRoot([...ROUTES])), importProvidersFrom(HttpClientModule) ], })</pre><div class="contentsignin">ログイン後にコピー</div></div>

PhotoService

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

@Injectable()export class PhotosService {
  constructor(
    @Inject('photoUrl') private photoUrl: string,
    private http: HttpClient  ) { }

  public getPhotoUrl(i: number): string {
      return `${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

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular の独立したコンポーネントの簡単な分析とその使用方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。