A brief analysis of independent components in Angular and see how to use them

This article will take you to understand the independent components in Angular, see how to create an independent component in Angular, and how to import existing modules in the independent component. I hope it will be helpful to everyone. !

An exciting feature of Angular 14 is that Angular’s ​​independent components are finally here.

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 not stable, and there may be some destructive updates in the future, so it is not recommended. Used in production environments. [Related tutorial recommendations: "angular tutorial"]

How to create an independent component

For existing components, we can ## Add standalone: ​​true to #@Component(), and then we can directly use imports to import others without @NgModule() module. If you are creating a new component, you can use the ng generate component --standalone command to directly create an independent component, for example:

ng generate component button-list --standalone

@Component({
  selector: 'app-button-list',  
  standalone: true,  
  imports: [
    CommonModule,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
export class ButtonListComponent implements OnInit

Import the existing component in the independent component For some modules

we can add existing modules in

imports, take MatButtonModule as an example:

imports: [
    CommonModule,
    MatButtonModule,
],

In this way we You can use the

mat-button component of MatButtonModule in ButtonListComponent:

<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

Rendering:

Start the Angular application using independent components

The first step is to set

AppComponent as an independent component:

@Component({
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  standalone: true,
})
export class AppComponent {

In the second step, add the imported modules in the imports of

AppModule to the imports of AppComponent, but there are two module exceptions: BrowserModule and BrowserAnimationsModule .

If imported, it may cause**

BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead .** Problem:

The third step is to delete the

app.module.ts file

The last step is to remove the ## In #main.ts

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { platformBrowserDynamic } from &amp;#39;@angular/platform-browser-dynamic&amp;#39;; platformBrowserDynamic().bootstrapModule(AppModule) .catch(err =&gt; console.error(err));</pre><div class="contentsignin">Copy after login</div></div> is changed to:

bootstrapApplication(AppComponent).catch(err => console.error(err));

In this way, we can start the Angular component using an independent component.

Configure routing for independent components

I have three independent components here:

HomeComponent

, ButtonListComponent and ChipListComponent, and then create the

ROUTES

object <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const ROUTES: Route[] = [ { path: &amp;#39;&amp;#39;, pathMatch: &amp;#39;full&amp;#39;, redirectTo: &amp;#39;home&amp;#39; }, { path: &amp;#39;home&amp;#39;, component: HomeComponent }, { path: &amp;#39;button&amp;#39;, loadComponent: () =&gt; import(&amp;#39;./app/button-list/button-list.component&amp;#39;).then( (mod) =&gt; mod.ButtonListComponent ), }, { path: &amp;#39;chip&amp;#39;, loadComponent: () =&gt; import(&amp;#39;./app/chip-list/chip-list.component&amp;#39;).then( (mod) =&gt; mod.ChipListComponent ), }, ];</pre><div class="contentsignin">Copy after login</div></div> in main.ts where

ButtonListComponent

and ChipListComponentUse loadComponent to implement lazy loading of routes. Then use

providers

to register RouterModule in the second parameter of bootstrapApplication. That’s it. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">bootstrapApplication(AppComponent, { providers: [ importProvidersFrom(RouterModule.forRoot([...ROUTES])), ], }).catch(err =&gt; console.error(err));</pre><div class="contentsignin">Copy after login</div></div>Rendering:

Configuration Dependency Injection

When we want to start the Angular application, Some values ​​or services may need to be injected. In

bootstrapApplication

, we can register values ​​or services through providers. For example, I have a url to get pictures, which needs to be injected into

PhotoService

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">bootstrapApplication(AppComponent, { providers: [ { provide: &amp;#39;photoUrl&amp;#39;, useValue: &amp;#39;https://picsum.photos&amp;#39;, }, {provide: PhotosService, useClass: PhotosService }, importProvidersFrom(RouterModule.forRoot([...ROUTES])), importProvidersFrom(HttpClientModule) ], })</pre><div class="contentsignin">Copy after login</div></div>

PhotoService

The code is as follows:

@Injectable()export class PhotosService {
  constructor(
    @Inject('photoUrl') private photoUrl: string,
    private http: HttpClient  ) { }

  public getPhotoUrl(i: number): string {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Source code

Source code used in this article: https://github.com/damingerdai/angular-standalone-components-app

Online demo: https://damingerdai.github.io/angular-standalone-components-app/

Original address: https://juejin.cn/post/7107224235914821662

For more programming-related knowledge, please visit:

programming video

! !

The above is the detailed content of A brief analysis of independent components in Angular and see how to use them. For more information, please follow other related articles on the PHP Chinese website!