Angular2 Komponente nicht gerendert

Ich habe Erfahrung in AngularJS und fange an, Angular2 zu lernen. Ich stehe am Anfang meiner Lernreise, aber ich bin schon fest.Angular2 Komponente nicht gerendert

Ich kann eine meiner Komponenten zu rendern, aber nicht die andere. Ich verwende Visual Studio 2013 Ultimate und TypeScript 1.5 Beta. Hier ist die Quelle:

index.html

<html> 
    <head> 
     <title>Angular 2 Quickstart</title> 
     <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
     <script src="https://jspm.io/system.js"></script> 
     <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> 
    </head> 
    <body> 

     <!-- The app component created in app.ts --> 
     <my-app></my-app> 
     <display></display> 
     <script> 
      System.import('app'); 
      System.import('displ'); 
     </script> 
    </body> 
</html>

app.ts

/// <reference path="d:/npm/typings/angular2/angular2.d.ts" /> 

import { Component, View, bootstrap} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'my-app', 
}) 

@View({ 
    template: '<h1>Hello {{ name }}</h1>', 
}) 

// Component controller 
export class MyAppComponent { 
    name: string; 

    constructor() { 
     this.name = 'Alice'; 
    } 
} 

bootstrap(MyAppComponent);

displ.ts

/// <reference path="d:/npm/typings/angular2/angular2.d.ts" /> 

import { Component, View, bootstrap} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'display' 
}) 

@View({ 
    template: '<h1>xxxHello {{ name }}</h1>', 
}) 

// Component controller 
export class DisplayComponent { 
    name: string; 

    constructor() { 
     this.name = 'Bob'; 
    } 
}

Th e Ergebnis ist einfach:

Hallo Alice

Wo hat Bob gehen?

Danke!

UPDATE

Ich weiß, dass ich es zu tun die falsche Art und Weise versuchte. Meine Absicht war es, die display Komponenten innerhalb der my-app Komponente verschachtelt haben, aber die Vorlage von my-app enthielt nicht die notwendigen Zutaten:

Es ist nicht ein <display></display> Element enthalten war. Dies war stattdessen in der obersten Ebene index.html enthalten, die der falsche Ort dafür war.
Die Ansichtsannotation enthielt die Anzeigekomponente nicht als Direktivenreferenz.

Kurz gesagt, was ich gehabt haben sollte:

app.ts (Ansicht Anmerkung)

@View({ 
    template: '<h1>Hello {{ name }}</h1><display></display>', 
    directives: [DisplayComponent] 
})

Und auch musste ich meine Anzeigekomponente in app.ts importieren:

import { DisplayComponent } from 'displ';

Quelle

2015-07-16 Aviad P.

'bootstrap (DisplayComponent);'? – nada

@nada ist es notwendig, jede Komponente zu laden? –

Normalerweise müssen wir nur die Root-Komponente booten, und wir setzen die anderen Komponenten darin als Direktiven ein. Das war, wir mussten nur die Wurzel booten. Wenn Sie die beiden Komponenten separat booten, werden sie zwei separate Angular 2-Anwendungen sein. –

Bitte boostrap(DisplayComponent); als nada hinzufügen weist schon darauf hin.

Vom quickstart:

Der Bootstrap() -Funktion nimmt eine Komponente als Parameter, ermöglicht die Komponente (sowie alle untergeordneten Komponenten enthält) zu zu machen.

Also ja, Sie müssen boostrap für alle Komponenten aufrufen, es sei denn, sie sind ein Kind einer anderen Komponente.

Quelle

2015-07-16 09:11:36

Ok, da ich neu damit bin, habe ich gerade gemerkt, dass ich meine zweite Komponente als Richtlinie in die erste ... –

einfügen muss Eine Komponente könnte andere Komponenten enthalten, als mit Direktiven? –

@AviadP .: Wenn Sie eine Komponente zu einem Kind einer anderen Komponente machen möchten. Ich denke, die Art und Weise, wie Sie eine Richtlinie verwenden, ist der einzige Weg, den ich kenne. –

Antwort

Verwandte Themen