Angular entry component and declarative component case comparison

This time I will bring you a comparison of Angular entry components and declarative component cases. What are the precautions when using Angular entry components and declarative component cases. The following is a practical case, let's take a look.

Preface

Components are a very important part of Angular. The following article will introduce you to the Angular entry component. ) and the difference between declarative components. The difference between Angular's declarative components and entry components is reflected in the different loading methods of the two.

• Declarative components are loaded through the selector declared by the component

The entry component (entry component) is loaded through the component Type dynamic loading

Declarative component

Declarative components will load the component through the selector declared by the component in the template.

Example

@Component({
 selector: 'a-cmp',
 template: `
 <p>这是A组件</p>
 `
})
export class AComponent {}

@Component({
 selector: 'b-cmp',
 template: `
 <p>在B组件里内嵌A组件：</p>
 <a-cmp></a-cmp>
 `
})
export class BComponent {}

In the BComponent template, use the selector<a-cmp></a-cmp> statement to load AComponent.

Entry component (entry component)

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

is mainly divided into three categories:

• Declared in @Ng<a href="http://www.php.cn/code/8212.html" target="_blank">Module</a>.<a href="http://www.php.cn/wiki/1505.html" target="_blank">bootstrap</a> Startup component, such as AppComponent.

• In routingconfigurationreferencecomponents

• Others are loaded using component types through programming Dynamic component

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

in bootstrap The declared AppComponent is the startup component. Although we will use the component's selector<app-root></app-root> position in index.html, Angular does not load the AppComponent based on this selector. This is where it can easily be misunderstood. Because index.html does not belong to any component template, Angular needs to load the component programmatically using the AppComponent type declared in bootstrap instead of using a selector.

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

Components referenced by routing configuration

@Component({
 selector: 'app-nav',
 template: `
 <nav>
 <a routerLink="/home" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">首页</a>
 <a routerLink="/users" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">用户</a>
 </nav>
 <router-outlet></router-outlet>
 `
})
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 class specified by the route according to the configured route component instead of loading through the component's selector.

Configuring entry components

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

Since the components referenced in the startup component and routing configuration are both entry components, Angular will automatically add these two components to @NgModule.entryComponents during compilation. For dynamic components written by ourselves, we need to manually add them to @NgModule.entryComponents.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the conflict between double-click and click events in JS

How to write a custom script with vue Define components

The above is the detailed content of Angular entry component and declarative component case comparison. For more information, please follow other related articles on the PHP Chinese website!