Angular learning talks about standalone components (Standalone Component)

This article will take you to continue learning angular and briefly understand the standalone component (Standalone Component) in Angular. I hope it will be helpful to everyone!

An exciting feature of Angular 14 is that Angular’s ​​Standalone Component is finally here. [Related tutorial recommendations: "angularTutorial"]

In Angular 14, developers can try to use independent components to develop various components, but it is worth noting that the API of Angular independent components is still Without stabilization, there may be some destructive updates in the future, so it is not recommended for use in production environments.

Basic usage

##angular.io/guide/stand…

##standalone is launched in Angular14 new features.

It can make your root module AppModule not so bloated

All components/pipe/directives should be introduced in the corresponding components when they are used

For example, this is the previous way of writing. We declare a

Footer

component and then import this component in the used

Module

<pre class='brush:php;toolbar:false;'>import { Component } from &amp;#39;@angular/core&amp;#39;; @Component({ selector: &amp;#39;app-footer&amp;#39;, template: ` &lt;footer class=&quot;dark:bg-gray-800 dark:text-gray-50&quot;&gt;Footer&lt;/footer&gt; `, }) export class FooterComponent {}</pre><pre class='brush:php;toolbar:false;'>import { NgModule } from &amp;#39;@angular/core&amp;#39;; import { CommonModule } from &amp;#39;@angular/common&amp;#39;; import { FooterComponent } from &amp;#39;./footer.component&amp;#39;; @NgModule({ declarations: [HomeComponent, FooterComponent], exports: [], imports: [CommonModule], }) export class AppModuleModule {}</pre>This kind of The writing method prevents us from getting rid of

NgModule

, but in fact our intention is to replace it with

FooterComponent

in AppComponent The writing method in

React

will actually be easier to manage and understandUse our new features

standalone

The Footer component will be transformed like this

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

Then for example on the Home page we can use it like this

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

Independent components can be directly used for lazy loading. Originally we had to use NgModule to achieve

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

More programming related knowledge, Please visit:

Programming Teaching

! !

The above is the detailed content of Angular learning talks about standalone components (Standalone Component). For more information, please follow other related articles on the PHP Chinese website!