站長資訊網本篇文章帶大家繼續angular的學習，簡單了解一下Angular中的獨立組件（Standalone Component），希望對大家有所幫助！
Angular 14一項令人興奮的特性就是Angular的獨立組件（Standalone Component）終于來了。【相關教程推薦：《angular教程》】
在Angular 14中， 開發者可以嘗試使用獨立組件開發各種組件，但是值得注意的是Angular獨立組件的API仍然沒有穩定下，將來可能存在一些破壞性更新，所以不推薦在生產環境中使用。
基本使用
angular.io/guide/stand…
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 {}
登錄后復制
