typescript - Angular2-komponent visas inte

Jag har erfarenhet av AngularJS och börjar lära mig Angular2. Jag är i början av min läranderesa, men jag har redan fastnat.

Jag kan få en av mina komponenter att rendera, men inte den andra. Jag använder Visual Studio 2013 Ultimate och TypeScript 1.5 beta. Här är källkoden:

index.html

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="https://github.jspm.io/jmcriffey/[email /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';
    }
}

Resultatet är helt enkelt:

Hej Alice

Vart gick Bob?

Tack!

UPPDATERING

Jag inser att jag försökte göra det på fel sätt. Min avsikt var att ha display-komponenten inbäddad i my-app-komponenten, men mallen för my-app inkluderade inte de nödvändiga ingredienserna:

  1. Det inkluderade inte ett <display></display>-element. Detta var istället inkluderat i toppnivån index.html, vilket var fel plats för det.
  2. Vyannoteringen inkluderade inte visningskomponenten som en direktivreferens.

Kort sagt, det jag borde ha haft var:

app.ts (visa anteckning)

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

Och dessutom var jag tvungen att importera min displaykomponent till app.ts:

import { DisplayComponent } from 'displ';

Svar #1

Vänligen lägg till bootstrap(DisplayComponent); som nada redan påpekar.

Från snabbstarten:

Funktionen bootstrap() tar en komponent som parameter och möjliggör för komponenten (samt eventuella underkomponenter den innehåller) att rendera.

Så ja, du måste verkligen kalla bootstrap för alla komponenter om de inte är ett barn till en annan komponent.

Relaterade artiklar