Angular 2, Komponente innerhalb der Hauptkomponente

Question

Ich habe mit der eckigen 2 Demo auf angular.io gespielt. Jetzt möchte ich eine neue Komponente erstellen und sie in meiner App verwenden.

Mein aktueller 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); 

Meine Komponente:

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 = ""; 
    } 
} 

Ich bin mir nicht sicher, ob die Syntax meiner Benutzerkomponente überhaupt richtig ist.

Meine App-Vorlage:

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

So wie ich die Benutzerkomponente verkabeln tun?

Der Fehler, den ich in der Konsole:

"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

Angular Kalender Demo hat zwei verschachtelte Komponenten (Kalender und Kalender-Zelle) https://github.com/djsmith42/angular2_calendar.git. Von dem, was ich Ihr MyAppComponent sehen können gibt es sollte Benutzer Komponente von @ Vorlage Direktiven Liste, wie diese Referenz:

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

Answer 2

In diesem Link von Angular2 Web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# Sie können sehen, dass das Hinzufügen directives: [...] innerhalb von @Components zum Beispiel:

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

aber sonst die Link-Vorlage in der Komponente, weiß nicht, ob dies funktioniert, wenn Sie @Template({ url:"app.html"}) außerhalb der Komponente verwenden.

können Sie den Dateinamen app.appcomponet.ts für weitere Details sehen, hoffentlich helfen.