Angular 2, компонент внутри основного компонента

Я играл с демонстрацией angular 2 на angular.io. Теперь я хочу создать новый компонент и использовать его в своем приложении.

Мое текущее приложение:

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

Мой компонент:

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

Я не уверен, правильно ли синтаксис моего пользовательского компонента.

Мой шаблон приложения:

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

Итак, как подключить пользовательский компонент?

Ошибка, которую я получаю в консоли:

 "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"

Ответ 1

Angular В календарном демо есть два вложенных компонента (календарь и календарная ячейка) https://github.com/djsmith42/angular2_calendar.git. Из того, что я вижу, ваш MyAppComponent должен ссылаться на компонент Users из списка директив @Template, например:

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

Ответ 2

В этой ссылке Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# вы можете увидеть, что добавление directives: [...] внутри @Components, например:

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

но в остальном шаблон использования ссылки внутри компонента, не знаю, будет ли это работать, если вы используете @Template({ url:"app.html"}) внешний компонент.

вы можете посмотреть имя файла app.appcomponet.ts для получения более подробной информации, надеюсь, поможет.