Explication détaillée de l'utilisation des composants d'entrée angulaires et des composants déclaratifs

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des composants d'entrée angulaires et des composants déclaratifs. Quelles sont les précautions lors de l'utilisation des composants d'entrée angulaires et des composants déclaratifs. jetez un oeil.

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 :

• à@Ng<a href="http://www.php.cn/code/8212.%20html%20" target="_blank">Module<code>@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>.bootstrap

  Démarrer un composant, tel que AppComponent.

• Dans la configuration de routage fait référence aux composants de

• d'autres sont chargés par programme à l'aide de types de composants Composant dynamique

Composant de démarrage

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

selector<app-root></app-root> L'AppComponent déclaré dans bootstrap est le composant de démarrage. Bien que nous utiliserons la position

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

@NgModule.entryComponentsDans 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({ 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 :

Utiliser le mode élégant des modules CSS

Explication détaillée de l'utilisation de vue-cli multi -emballage du module

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!