Angular 2, ana bileşenin içindeki bileşen

Question

Angular.io üzerindeki açısal 2 demo ile oynadım. Şimdi yeni bir bileşen oluşturmak ve onu uygulamamın içinde kullanmak istiyorum.

Benim şu anki uygulaması:

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

Benim bileşen: my kullanıcı bileşeninin sözdizimi hiç doğru olup olmadığını

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

emin değilim.

Uygulamam şablonu:

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

Peki nasıl Kullanıcı bileşenini kadar Tel mı?

ben konsolda olsun hatası:

"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

Eğik takvim demo iç içe geçmiş iki bileşeni vardır (takvim ve ajanda hücreli) https://github.com/djsmith42/angular2_calendar.git. Orada gördüğüm kadarıyla senin MyAppComponent böyle, Şablon'un direktifleri listesinden @ yanından kullanıcılar bileşeni başvuruda bulunmalıdır Gönderen: Gördüğünüz

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

Answer 2

Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# bu linkte o örneğin @Components iç directives: [...] ekleyerek:

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

, ancak aksam, bu bileşenin içindeki bağlantı şablonunu kullanır, bu bileşen, @Template({ url:"app.html"}) dış bileşenini kullanırsanız, bunun çalışıp çalışmadığını bilmez.

Daha fazla ayrıntı için app.appcomponet.ts dosya adını izleyebilirsiniz, umarım yardımcı olur.