Jeg er ny på Angular og jeg prøver fortsatt å forstå det. Jeg' har fulgt kurset på Microsoft Virtual Academy, og det var flott, men jeg fant et lite avvik mellom hva de sa og hvordan koden min oppfører seg! Nærmere bestemt har jeg prøvd å "put a component inside another component" som dette:
@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{}
Dette er det samme eksemplet som de lager på kurset, men i min kode fungerer det ikke! Spesielt VisualStudio sier til meg at egenskapen 'directives' ikke eksisterer i komponentdekoratoren. Hvordan kan jeg løse dette?
Du legger ikke inn en komponent i directives
.
Du registrerer den i @NgModule
-deklarasjoner:
@NgModule({
imports: [ BrowserModule ],
declarations: [ App , MyChildComponent ],
bootstrap: [ App ]
})
og deretter legger du den bare inn i Parent's Template HTML som : <my-child></my-child>
.
Det er alt.
Hvis du fjerner direktivattributtet, bør det fungere.
@Component({
selector: 'parent',
template: `
<h1>Parent Component</h1>
<child></child>
`
})
export class ParentComponent{}
@Component({
selector: 'child',
template: `
<h4>Child Component</h4>
`
})
export class ChildComponent{}
Direktiver er som komponenter, men de brukes i attributter. De har også en deklarator @Directive
. Du kan lese mer om direktiver i Structural Directives og Attribute Directives.
Det finnes to andre typer Angular-direktiver, som er utførlig beskrevet utførlig beskrevet andre steder: (1) komponenter og (2) attributtdirektiver.
En komponent administrerer et HTML-område på samme måte som et HTML-element. element. Teknisk sett er det et direktiv med en mal.
Hvis du åpner ordlisten, kan du også finne at komponenter også er direktiver.
Direktiver faller inn i en av følgende kategorier:
Komponenter kombinerer applikasjonslogikk med en HTML-mal for å gjengi applikasjonsvisninger. Komponenter er vanligvis representert som HTML elementer. De er byggesteinene i en Angular-applikasjon.
Attributtdirektiver kan lytte til og endre oppførselen til andre HTML-elementer, attributter, egenskaper og komponenter. De er vanligvis representert som HTML-attributter, derav navnet.
Strukturelle direktiver er ansvarlige for å forme eller omforme HTML-layout, vanligvis ved å legge til, fjerne eller manipulere elementer og deres barn. og deres underordnede elementer.
Forskjellen er at komponenter har en mal. Se oversikten Angular Architecture.
Et direktiv er en klasse med en @Directive
dekorator. En komponent er en
directive-with-a-template; en
@Component
decorator er faktisk en@Directive
dekorator utvidet med malorienterte funksjoner.
Metadataene for @Component
har ikke attributtet directives
. Se Komponentdekorator.
Jeg tror at i Angular-2-versjonen din støttes ikke direktiver i Component decorator, derfor må du registrere direktiv på samme måte som andre komponenter i @NgModule og deretter importere i komponenten som nedenfor og også fjerne directives: [ChildComponent]
fra decorator.
import {myDirective} from './myDirective';