web-dev-qa-db-fra.com

Comment insérer un composant dans un autre composant dans Angular2?

Je suis nouveau à Angular et j'essaie encore de le comprendre. J'ai suivi le cours sur la Microsoft Virtual Academy et c'était formidable, mais j'ai trouvé un petit décalage entre ce qu'ils ont dit et le comportement de mon code! Plus précisément, j'ai essayé de "placer un composant dans un autre composant" comme ceci:

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

C'est le même exemple que sur le cours, mais dans mon code, ça ne marche pas! En particulier, VisualStudio me dit que la propriété 'directives' n'existe pas dans le décorateur de composants. Comment puis-je résoudre ça?

angularangular2-directives
32
Paolo Ardissone

Vous ne mettez pas un composant dans directives

Vous enregistrez le dans les déclarations @NgModule:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

et puis vous venez de le mettre dans le modèle HTML du parent comme: <my-child></my-child>

C'est ça.

42
Royi Namir

Je pense que, dans votre version angulaire-2, les directives ne sont pas prises en charge dans Component Decorator. Par conséquent, vous devez directive de registre identique à un autre composant de @ NgModule, puis importer le composant comme indiqué ci-dessous. et aussi retirer directives: [ChildComponent] du décorateur.

import {myDirective} from './myDirective';
3
Sandip - Full Stack Developer

Si vous supprimez des directives, cela devrait fonctionner.

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

Les directives sont comme des composants mais elles sont utilisées dans des attributs. Ils ont également un déclarateur @Directive. Vous pouvez en savoir plus sur les directives Directives structurelles et Directives d'attributs .

Il existe deux autres types de directives Angular, décrites de manière détaillée ailleurs: (1) composants et (2) directives d'attribut.

Un composant gère une région HTML à la manière d'un élément HTML natif. Techniquement, c'est une directive avec un modèle.

De même, si vous ouvrez le glossaire, vous constaterez que les composants sont également des directives.

Directives appartiennent à l'une des catégories suivantes:

  • Composants combine la logique d'application avec un modèle HTML pour rendre les vues d'application. Les composants sont généralement représentés sous forme d'éléments HTML. Ce sont les blocs de construction d'une application Angular.

  • Directives d'attribut peut écouter et modifier le comportement d'autres éléments HTML, attributs, propriétés et composants. Ils sont généralement représentés sous forme d'attributs HTML, d'où leur nom.

  • Directives structurelles sont responsables de la mise en forme ou de la modification de la présentation HTML, généralement en ajoutant, en supprimant ou en manipulant des éléments et leurs enfants.

La différence que les composants ont un modèle. Voir Architecture angulaire aperçu.

Une directive est une classe avec un décorateur @Directive. Un composant est une directive avec un modèle; Un décorateur @Component est en réalité un décorateur @Directive étendu avec des fonctionnalités orientées modèle.

Les métadonnées @Component n'ont pas d'attribut directives. Voir Composant décorateur .

3
Roman C