Angular 14一項令人興奮的特性就是Angular的獨立組件（Standalone Component）終于來了。【相關教程推薦：《angular教程》】
在Angular 14中， 開發者可以嘗試使用獨立組件開發各種組件，但是值得注意的是Angular獨立組件的API仍然沒有穩定下，將來可能存在一些破壞性更新，所以不推薦在生產環境中使用。
(資料圖片僅供參考)
standalone 是 Angular14 推出的新特性。
它可以讓你的 根模塊 AppModule 不至于那么臃腫
所有的 component / pipe / directive 都在被使用的時候 在對應的組件引入就好了
舉個例子 這是之前的寫法 我們聲明一個 Footer組件
然后在使用的 Module中導入這個組件
import { Component } from "@angular/core";@Component({ selector: "app-footer", template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,})export class FooterComponent {}import { NgModule } from "@angular/core";import { CommonModule } from "@angular/common";import { FooterComponent } from "./footer.component";@NgModule({ declarations: [HomeComponent, FooterComponent], exports: [], imports: [CommonModule],})export class AppModuleModule {}這種寫法導致我們始終無法擺脫 NgModule
但其實我們的意圖就是在 AppComponent中使用 FooterComponent
換成 React中的寫法 其實會更便于管理和理解
用上我們的新特性 standalone
Footer 組件就改造成這樣
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 {}然后比如在 Home 頁面 我們就可以這樣使用
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中文網其它相關文章！
關鍵詞： 獨立組件 Angular.js
營業執照公示信息