typescript - Angular2 component not rendered -


i have experience in angularjs , starting learn angular2. @ beginning of learning journey, i'm stuck.

i can 1 of components render, not other. using visual studio 2013 ultimate , typescript 1.5 beta. here's source:

index.html

<html>     <head>         <title>angular 2 quickstart</title>         <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/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>          <!-- 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} '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} 'angular2/angular2';  // annotation section @component({     selector: 'display' })  @view({     template: '<h1>xxxhello {{ name }}</h1>', })  // component controller export class displaycomponent {     name: string;      constructor() {         this.name = 'bob';     } }

the result simply:

hello alice

where did bob go?

thanks!

update

i realize trying wrong way. intention have display component nested inside my-app component, template of my-app didn't include necessary ingredients:

  1. it didn't include <display></display> element. instead included in top level index.html wrong place it.
  2. the view annotation didn't include display component directive reference.

in short, should have had was:

app.ts (view annotation)

@view({     template: '<h1>hello {{ name }}</h1><display></display>',     directives: [displaycomponent] })

and had import display component app.ts:

import { displaycomponent } 'displ';

please add boostrap(displaycomponent); nada points out.

from quickstart:

the bootstrap() function takes component parameter, enabling component (as child components contains) render.

so yes, need call boostrap components unless child of component.


-

Comments

Post a Comment