Comparaison de cas de composant d'entrée angulaire et de composant déclaratif

Cette fois, je vais vous proposer une comparaison des composants d'entrée angulaires et des cas de composants déclaratifs. Quelles sont les précautions lors de l'utilisation de composants d'entrée angulaires et de cas de composants déclaratifs. Ce qui suit est un cas pratique, prenons un. regarder.

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="//m.sbmmt.com/code/8212.%20html%20" target="_blank">Module<code>@Ng<a href="//m.sbmmt.com/code/8212.html" target="_blank">Module</a>.<a href="//m.sbmmt.com/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

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

@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

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

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

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

Comment gérer le conflit entre les événements de double-clic et de clic dans JS

Comment écrire un script personnalisé avec le composant vue Define

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!