Shulou(Shulou.com)06/03 Report--

Editor to share with you what are the differences between Angular entry components and declarative components, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Preface

Components are a very important part of Angular. The following article will introduce you to the difference between Angular entry components (entry component) and declarative components. The difference between Angular declarative components and portal components is reflected in the way they are loaded.

Declarative components are loaded through the selector declared by the component

The entry component (entry component) is loaded dynamically through the type of the component

Declarative component

The declarative component loads the component in the template through the selector declared by the component.

Example

@ Component ({selector: 'amurcmpacks, template: `

This is component A.

`}) export class AComponent {} @ Component ({selector: 'bmurcmpacks, template:`

Embed component An in component B:

`}) export class BComponent {}

In the template of BComponent, load the AComponent using the selector declaration.

Entry component (entry component)

The entry component loads the component through the specified component class.

It is mainly divided into three categories:

Startup components declared in @ NgModule.bootstrap, such as AppComponent.

Components referenced in the routing configuration

Other dynamic components loaded programmatically using component types

Start the component

App.component.ts

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

App.module.ts

@ NgModule ({declarations: [AppComponent], imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule], providers: [], bootstrap: [AppComponent]}) export class AppModule {}

The AppComponent declared in bootstrap is the startup component. Although we will use the location of the component's selector in index.html, Angular does not load AppComponent based on this selector. This is easy to be misunderstood. Because index.html does not belong to any component template, Angular needs to programmatically load the component using the AppComponent type declared in bootstrap instead of using selector.

Because Angular dynamically loads AppComponent, all AppComponent is an entry component.

Components referenced by routing configuration

@ Component ({selector: 'app-nav', template: `Home user `}) export class NavComponent {}

We need to configure a route

Const routes: Routes = [{path: "home", component: HomeComponent}, {path: "user", component: UserComponent}]; @ NgModule ({imports: [RouterModule.forRoot (routes)], exports: [RouterModule]}) export class AppRoutingModule {}

Angular loads the component according to the component class specified by the route, rather than through the selector of the component, based on the configured route.

Configure the portal component

In Angular, the incoming components need to be configured in @ NgModule.entryComponents.

Since the components referenced in the startup component and routing configuration are portal components, Angular automatically adds these two components to @ NgModule.entryComponents at compile time. Dynamic components written by ourselves need to be manually added to @ NgModule.entryComponents.

@ NgModule ({declarations: [AppComponent], imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule], providers: [], entryComponents: [DialogComponent], declarations: [] bootstrap: [AppComponent]}) export class AppModule {} is all the contents of the article "what are the differences between Angular entry components and declarative components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.