Angular の学習ではスタンドアロンコンポーネントについて説明します (Standalone Component)-jsチュートリアル-php.cn

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

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

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

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

#基本的な使用法

##angular.io/guide/stand…
##スタンドアロンは Angular14 で新たにリリースされました特徴。

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

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

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

Footer

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

Module

import { Component } from &#39;@angular/core&#39;; @Component({ selector: &#39;app-footer&#39;, template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `, }) export class FooterComponent {}

ログイン後にコピー

import { NgModule } from &#39;@angular/core&#39;; import { CommonModule } from &#39;@angular/common&#39;; import { FooterComponent } from &#39;./footer.component&#39;; @NgModule({ declarations: [HomeComponent, FooterComponent], exports: [], imports: [CommonModule], }) export class AppModuleModule {}

ログイン後にコピー

にインポートします。このメソッドでは

NgModule

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

AppComponent# の

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

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

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

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

import { Component } from '@angular/core'; @Component({ selector: 'app-footer', // 将该组件声明成独立组件 standalone: true, template: ` 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: ``, }) 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 サイトの他の関連記事を参照してください。