Angolare 2, componente interno al componente principale

Question

Ho giocato con la demo angolare 2 su angular.io. Ora voglio creare un nuovo componente e usarlo nella mia app.

Il mio attuale app:

import {Component, Template, bootstrap} from 'angular2/angular2'; 
import {UsersComponent} from './components/users/component.js'; 

// Annotation section 
@Component({ 
    selector: 'my-app' 
}) 
@Template({ 
    url:"app.html" 
}) 
// Component controller 
class MyAppComponent { 
    newName:string; 
    names:Array<string>; 
    constructor() { 
    this.name = 'Florian'; 
    } 

    showAlert(){ 
    alert("It works"); 
    } 

    addName(){ 
    names.push(newName); 
    newName = ""; 
    } 
} 

bootstrap(MyAppComponent); 

La mia componente:

import {Component, Template, bootstrap} from 'angular2/angular2'; 
// Annotation section 
@Component({ 
    selector: 'users' 
}) 
@Template({ 
    url:"./template.html" 
}) 
// Component controller 
class UsersComponent { 
    newName:string; 
    names:Array<string>; 
    constructor() { 

    } 

    addName(){ 
    names.push(newName); 
    newName = ""; 
    } 
} 

Non sono sicuro se la sintassi della mia componente utente sia corretto a tutti.

Il mio modello di applicazione:

<h1>Hello {{ name }}</h1> 
<h2>{{2+2}}</h2> 
<hr /> 
<button (click)="showAlert()">Click to alert</button> 
<users></users> 

Così Come si collega il componente utente?

L'errore che ottengo nella console:

"Error loading "components/users/component.js" at <unknown>↵Error loading "components/users/component.js" from "app" at http://localhost:8080/app.es6↵Cannot read property 'replace' of undefined" 

Answer 1

angolare calendario demo ha due componenti nidificati (calendario e calendario celle) https://github.com/djsmith42/angular2_calendar.git. Da quello che posso vedere lì il tuo MyAppComponent dovrebbe fare riferimento componente utenti da @ lista direttive del modello, in questo modo:

@Template({ 
    url: System.baseURL+'app/components/calendar/calendar.html', 
    directives: [ 
    Foreach, 
    If, 
    CalendarCell 
    ] 
}) 

Answer 2

In questo link del Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# si può vedere che l'aggiunta di directives: [...] all'interno di @Components ad esempio:

@Component({ 
    selector: 'my-app', 
    directives: [UsersComponent] 
}) 

ma in caso contrario il collegamento utilizza il modello all'interno del componente, non so se questo funzionerà se si utilizza il componente esterno @Template({ url:"app.html"}).

è possibile guardare il nome file app.appcomponet.ts per ulteriori dettagli, si spera di aiuto.