How to use entry component

This time I will show you how to use the entry component and what are the precautions for using the entry component. 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.

are mainly divided into three categories:

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

• Components referenced in routing configuration

• Other dynamic components loaded programmatically using component types

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

The AppComponent declared in bootstrap 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>首页</a>
 <a>用户</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:

node token for user verification

##How to use scss in Angular projects

The above is the detailed content of How to use entry component. For more information, please follow other related articles on the PHP Chinese website!