¿Cómo poner un componente dentro de otro componente en Angular2?

Soy nuevo en Angular y todavía estoy tratando de entenderlo. He seguido el curso en la Academia Virtual de Microsoft y ha sido genial, pero he encontrado una pequeña discrepancia entre lo que decían y cómo se comportaba mi código. Concretamente, he intentado "poner un componente dentro de otro componente" así:

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

Este es el mismo ejemplo que hacen en el curso, pero en mi código no funciona. En concreto VisualStudio me dice que la propiedad 'directivas' no existe en el decorador del componente. ¿Cómo puedo solucionar esto?

Roman C
Pregunta editada 19º abril 2017 в 11:26
Programación
angular angular2-directives
19º abril 2017 в 10:04
No hay vistas aún
Solución

Usted no pone un componente en directivas.

Se registra en las declaraciones de @NgModule:

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

y luego lo pones en el HTML de la plantilla del padre como : ``

Eso'es todo.

insertusernamehere
Respuesta editada 19º febrero 2018 в 10:39
Comentarios (6)

Si quitas el atributo de las directivas debería funcionar.

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>

        `
    })
    export class ParentComponent{}

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

Las directivas son como los componentes pero se usan en los atributos. También tienen un declarador @Directiva. Puedes leer más sobre las directivas Structural Directives y Attribute Directives.

Hay otros dos tipos de directivas de Angular, descritas ampliamente en otra parte: (1) componentes y (2) directivas de atributos.

Un componente maneja una región de HTML como un elemento HTML nativo. nativo. Técnicamente es una directiva con una plantilla.

Además si abres el glosario puedes encontrar que los componentes también son directivas.

Las directivas se clasifican en una de las siguientes categorías:

Componentes combinan la lógica de la aplicación con una plantilla HTML para renderizar las vistas de la aplicación. Los componentes suelen representarse como elementos HTML

elementos. Son los bloques de construcción de una aplicación Angular.

Las directivas de atributos]5 pueden escuchar y modificar el comportamiento de otros elementos, atributos, propiedades y componentes HTML. Son Normalmente se representan como atributos HTML, de ahí su nombre.

  • Directivas estructurales son responsables de dar forma o remodelar el diseño HTML, normalmente añadiendo, eliminando o manipulando elementos y sus hijos.

La diferencia es que los componentes tienen una plantilla. Ver Arquitectura de Angular visión general.

Una directiva es una clase con un decorador @Directive. Un componente es una directiva-con-plantilla; un decorador @Component es en realidad un

decorador @Directive ampliado con características orientadas a la plantilla.

Los metadatos @Component no tienen el atributo directives. Véase Decorador de componentes.

Roman C
Respuesta editada 19º abril 2017 в 10:57
Comentarios (2)

Creo que en tu versión de Angular-2 las directivas no están soportadas en el decorador de componentes, por lo que tienes que registrar la directiva igual que otro componente en @NgModule y luego importar en el componente como se indica a continuación y también eliminar directivas: [ChildComponent] del decorador.

import {myDirective} from './myDirective';
Akhil Menon
Respuesta editada 5º febrero 2018 в 5:14
Comentarios (0)