Angular 2, komponent wewnątrz głównego komponentu

Question

Grałem w 2-kątowe demo na angular.io. Teraz chcę utworzyć nowy komponent i użyć go wewnątrz mojej aplikacji.

Mój obecny aplikacja:

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

Moja komponent:

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

Nie jestem pewien, czy składnia moim komponentu użytkownika jest poprawna w ogóle.

Moja aplikacja szablon:

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

Więc jak mam drut komponentu użytkownik?

Błąd pojawia się w konsoli:

"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

kątowa demo kalendarz ma dwie zagnieżdżone elementy (kalendarz i kalendarz-cell) https://github.com/djsmith42/angular2_calendar.git. Z tego, co mogę tam zobaczyć swój MyAppComponent powinien odwoływać składnik użytkownikom @ listy dyrektyw szablon, podobnie jak to:

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

Answer 2

W tym linkiem Angular2 internecie https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# widać, że dodanie directives: [...] wewnątrz @Components na przykład:

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

ale poza tym szablon użycia łącza wewnątrz komponentu, nie wiem, czy to zadziała, jeśli użyjesz komponentu zewnętrznego @Template({ url:"app.html"}).

możesz obejrzeć nazwę pliku app.appcomponet.ts po więcej szczegółów, miejmy nadzieję, pomoc.