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

ng-content select angular 6

Question

Soy nuevo en Angular y todavía estoy tratando de entenderlo. Seguí el curso en la Academia Virtual de Microsoft y fue genial, ¡pero encontré una pequeña discrepancia entre lo que dijeron y cómo se comporta mi código! Específicamente, he intentado "colocar un componente dentro de otro componente" como este:

@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 particular, VisualStudio me dice que la propiedad ''directivas'' no existe en el decorador de componentes. ¿Como puedo resolver esto?

Answer 1

Creo que en su versión Angular-2 las directivas no son compatibles con el decorador de componentes, por lo tanto, tiene que registrar la directiva igual que otro componente en @NgModule y luego importar el componente como se muestra abajo y también eliminar las directives: [ChildComponent] del decorador.

import {myDirective} from ''./myDirective'';

Answer 2

No se pone un componente en las directives

Lo registras en @NgModule declaraciones de @NgModule :

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

y luego lo pones en el HTML de la plantilla de los padres como: <my-child></my-child>

Eso es.

Answer 3

Si eliminas el atributo directivas debería funcionar.

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


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

Las directivas son como componentes pero se usan en atributos. También tienen un declarador @Directive . Puede leer más sobre directivas Directivas estructurales y Directivas de atributos .

Hay otros dos tipos de directivas angulares, que se describen extensamente en otra parte: (1) componentes y (2) directivas de atributos.

Un componente administra una región de HTML a la manera de un elemento HTML nativo. Técnicamente es una directiva con una plantilla.

Además, si está abierto el glosario, puede encontrar que los componentes también son directivas.

Directives se clasifican en una de las siguientes categorías:

• Components combinan la lógica de la aplicación con una plantilla HTML para representar vistas de la aplicación. Los componentes generalmente se representan como elementos HTML. Son los bloques de construcción de una aplicación angular.

• Las directivas de atributos pueden escuchar y modificar el comportamiento de otros elementos HTML, atributos, propiedades y componentes. Por lo general, se representan como atributos HTML, de ahí el nombre.

• Las directivas estructurales son responsables de dar forma o remodelar el diseño HTML, generalmente mediante la adición, eliminación o manipulación de elementos y sus elementos secundarios.

La diferencia de que los componentes tienen una plantilla. Ver la descripción de la arquitectura angular .

Una directiva es una clase con un decorador @Directive . Un componente es una directiva con una plantilla; un decorador @Component es en realidad un decorador @Directive ampliado con características orientadas a la plantilla.

Los metadatos de @Component no tienen atributo de directives . Ver decorador de componentes .