Comment utiliser le composant d'entrée

Cette fois, je vais vous montrer comment utiliser le composant d'entrée et quelles sont les précautions d'utilisation du composant d'entrée. Ce qui suit est un cas pratique, jetons un coup d'œil.

Préface

Les composants sont une partie très importante d'Angular L'article suivant vous présentera le composant d'entrée angulaire) et les composants déclaratifs. , la différence entre les composants déclaratifs et les composants d'entrée d'Angular se reflète dans les différentes méthodes de chargement des deux.

• Les composants déclaratifs sont chargés via le sélecteur déclaré par le composant

Le composant d'entrée est chargé via le composant Type chargement dynamique

Composant déclaratif

Le composant déclaratif chargera le composant via le sélecteur déclaré par le composant dans le modèle.

Exemple

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

Dans le modèle de BComponent, utilisez la déclaration selector<a-cmp></a-cmp> pour charger AComponent.

Composant d'entrée

Le composant d'entrée charge le composant via la classe de composant spécifiée.

est principalement divisé en trois catégories :

• Composants de démarrage déclarés dans @NgModule.bootstrap, tels que AppComponent.

• Composants référencés dans la configuration du routage

• Autres composants dynamiques chargés par programme à l'aide de types de composants

Démarrage composant

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

L'AppComponent déclaré dans bootstrap est le composant de démarrage. Bien que nous utiliserons la position selector<app-root></app-root> du composant dans index.html, Angular ne charge pas l'AppComponent en fonction de ce sélecteur. C’est là qu’il peut facilement être mal compris. Étant donné que index.html n'appartient à aucun modèle de composant, Angular doit charger le composant par programme en utilisant le type AppComponent déclaré dans bootstrap au lieu d'utiliser un sélecteur.

Puisque Angular charge dynamiquement AppComponent, tout AppComponent est un composant d'entrée.

Composants référencés par configuration de routage

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

Nous devons configurer une route

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

Angular est basé sur la route configurée, en fonction sur la classe Component spécifiée par l'itinéraire pour charger les composants, plutôt que de les charger via le sélecteur du composant.

Configuration du composant d'entrée

Dans Angular, le composant d'entreposage doit être configuré dans @NgModule.entryComponents.

Étant donné que les composants référencés dans le composant de démarrage et la configuration de routage sont tous deux des composants d'entrée, Angular ajoutera automatiquement ces deux composants à @NgModule.entryComponents lors de la compilation. Pour les composants dynamiques écrits par nous-mêmes, nous devons les ajouter manuellement à @NgModule.entryComponents.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

node+token pour la vérification de l'utilisateur

Comment utiliser scss dans les projets angulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!