Wie man eine Komponente innerhalb einer anderen Komponente in Angular2 setzen?

I'm neu bei Angular und I'm noch versuchen, es zu verstehen. I've folgte der Kurs auf der Microsoft Virtual Academy und es war großartig, aber ich fand eine kleine Diskrepanz zwischen dem, was sie sagte und wie mein Code zu verhalten! Insbesondere habe ich versucht, "setzen Sie eine Komponente innerhalb einer anderen Komponente" wie diese:

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

Dies ist das gleiche Beispiel, das sie auf dem Kurs machen, aber in meinem Code doesn't funktionieren! Insbesondere sagt mir VisualStudio, dass die 'directives' Eigenschaft im Komponentendekorator nicht existiert. Wie kann ich das Problem lösen?

Roman C
Bearbeitete Frage 19. April 2017 в 11:26
Programmierung
angular angular2-directives
19. April 2017 в 10:04
noch keine Aufrufe
Lösung

Man stellt eine Komponente nicht in directives

Sie registrieren sie in @NgModule-Deklarationen:

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

und dann fügen Sie es einfach in das Parent's Template HTML als : ``

That's it.

insertusernamehere
Bearbeitete Antwort 19. Februar 2018 в 10:39
Kommentare (6)

Wenn Sie das Attribut directives entfernen, sollte es funktionieren.

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

        `
    })
    export class ParentComponent{}

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

Direktiven sind wie Komponenten, aber sie werden in Attributen verwendet. Sie haben auch einen Deklarator @Directive. Sie können mehr über Direktiven Strukturelle Direktiven und Attribut-Direktiven lesen.

Es gibt zwei weitere Arten von Angular-Direktiven, die an anderer Stelle ausführlich beschrieben werden

an anderer Stelle beschrieben: (1) Komponenten und (2) Attribut-Direktiven.

Eine Komponente verwaltet einen Bereich von HTML in der Art eines nativen HTML Elements. Technisch gesehen handelt es sich um eine Direktive mit einer Vorlage.

Wenn Sie das Glossar öffnen, können Sie auch feststellen, dass Komponenten auch Richtlinien sind.

Direktiven fallen in eine der folgenden Kategorien:

  • Komponenten kombinieren Anwendungslogik mit einer HTML-Vorlage, um Anwendungsansichten darzustellen. Komponenten werden normalerweise als HTML Elemente dargestellt. Sie sind die Bausteine einer Angular-Anwendung.

  • Attributdirektiven können auf das Verhalten anderer HTML-Elemente, Attribute, Eigenschaften und Komponenten hören und diese verändern. Sie werden normalerweise als HTML-Attribute dargestellt, daher der Name.

  • Strukturelle Direktiven sind für die Gestaltung oder Umgestaltung des HTML-Layouts verantwortlich, typischerweise durch Hinzufügen, Entfernen oder Manipulieren von Elementen und deren Kinder.

Der Unterschied, dass Komponenten ein Template haben. Siehe Angular Architecture Übersicht.

Eine Richtlinie ist eine Klasse mit einem @Directive Dekorator. Eine Komponente ist eine Direktive-mit-Template; ein @Component Dekorator ist eigentlich ein

@Directive-Dekorator, erweitert um Template-orientierte Eigenschaften.

Die @Component Metadaten haben kein directives Attribut. Siehe Komponentendekorator.

Roman C
Bearbeitete Antwort 19. April 2017 в 10:57
Kommentare (2)

Ich denke in Ihrer Angular-2 Version werden Direktiven im Component Dekorator nicht unterstützt, daher müssen Sie Registrieren Sie die Direktive wie eine andere Komponente in @NgModule und importieren Sie dann in der Komponente wie unten und entfernen Sie auch directives: [ChildComponent] aus dem Dekorator entfernen.

import {myDirective} from './myDirective';
Akhil Menon
Bearbeitete Antwort 5. Februar 2018 в 5:14
Kommentare (0)