Angular学习之聊聊独立组件（Standalone Component）-tutorial js-php.cn

本篇文章带大家继续angular的学习，简单了解一下Angular中的独立组件（Standalone Component），希望对大家有所帮助！

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
 `, }) export class FooterComponent {}

Salin selepas log masuk

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 {}

Salin selepas log masuk

这种写法导致我们始终无法摆脱NgModule

但其实我们的意图就是在AppComponent中使用FooterComponent

换成React中的写法其实会更便于管理和理解

用上我们的新特性standalone

Footer 组件就改造成这样

import { Component } from '@angular/core'; @Component({ selector: 'app-footer', // 将该组件声明成独立组件 standalone: true, template: ` Footer
 `, }) export class FooterComponent {}

Salin selepas log masuk

然后比如在 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: ``, }) export class WelcomeComponent {}

Salin selepas log masuk

独立组件可以直接用于懒加载本来我们必须借助 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 {}

Salin selepas log masuk

更多编程相关知识，请访问：编程教学！！

Atas ialah kandungan terperinci Angular学习之聊聊独立组件（Standalone Component）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!