Angular 角度2，主要部件内部的部件

我在angular.io上玩过angular 2演示。 现在我想创建一个新组件并在我的应用程序中使用它

我当前的应用程序：

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

从'angular2/angular2'导入{组件、模板、引导程序}；
从“./components/users/component.js”导入{UsersComponent}；
//注释部分
@组成部分({
选择器：“我的应用程序”
})
@模板({
url:“app.html”
})
//组件控制器
类MyAppComponent{
newName:string；
名称：数组；
构造函数（）{
this.name='Florian'；
}
showarert（）{
警惕（“它起作用”）；
}
addName（）{
name.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 = "";
  }
}

从'angular2/angular2'导入{组件、模板、引导程序}；
//注释部分
@组成部分({
选择器：“用户”
})
@模板({
url:“./template.html”
})
//组件控制器
类UsersComponent{
newName:string；
名称：数组；
构造函数（）{
}
addName（）{
name.push（newName）；
newName=“”；
}
}

我不确定我的用户组件的语法是否正确

我的应用程序模板：

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

Hello{{name}
{{2+2}}

单击以发出警报

那么如何连接用户组件呢

控制台中出现的错误：

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

“加载组件时出错/users/component.js”位于↵从位于的“应用程序”加载“组件/用户/组件.js”时出错http://localhost:8080/app.es6↵无法读取未定义“”的属性“replace”

角度日历演示有两个嵌套组件（日历和日历单元格）。从这里我可以看到，您的MyAppComponent应该引用@Template的指令列表中的Users组件，如下所示：

@模板({
url:System.baseURL+'app/components/calendar/calendar.html'，
指令：[
Foreach，
如果,，
日历电池
]
})

在

Angular2

网站的这个链接中，您可以看到在

@组件内部添加
指令：[……]
，例如：

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

但是，如果在组件内部使用
@template（{url:“app.html”}）
，则不知道该链接是否可以在组件内部使用模板

您可以查看文件名app.appcomponet.ts

了解更多详细信息，希望能有所帮助。

您是对的，谢谢您的示例。我的应用程序确实没有指令数组。我的用户组件的模板url错误（应该是绝对路径）。我没有将我的组件文件夹添加到html文件中的System.path中。Minor nit：我认为在指令列表之前需要一个“const”。下面是一篇微文章，其中包含一个修改过的快速入门教程：@buraq nope，这是针对dart的。此人正在使用js'Foreach，If，CalendarCell'对具体ng类的所有硬引用。如果它们在不同的文件中呢？您将需要DI，在这种情况下，您将如何引用它？从RC6开始，这就不可能了。