我有AngularJS的经验，并开始学习Angular2 . 我正处于学习之旅的最初阶段，但我已经陷入困境 .
我可以让我的一个组件渲染，但不能另一个 . 我正在使用Visual Studio 2013 Ultimate和TypeScript 1.5 beta . 这是来源：
index.html
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<display></display>
<script>
System.import('app');
System.import('displ');
</script>
</body>
</html>
app.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app',
})
@View({
template: '<h1>Hello {{ name }}</h1>',
})
// Component controller
export class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
bootstrap(MyAppComponent);
displ.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'display'
})
@View({
template: '<h1>xxxHello {{ name }}</h1>',
})
// Component controller
export class DisplayComponent {
name: string;
constructor() {
this.name = 'Bob';
}
}
结果很简单：
Hello Alice
鲍勃去哪儿了？
谢谢！
UPDATE
我意识到我试图以错误的方式做到这一点 . 我的意图是将 display 组件嵌套在 my-app 组件中，但 my-app 的模板不包含必要的组件：
-
它没有包含
<display></display>元素 . 这被包含在顶级index.html中，这是错误的地方 . -
视图注释未将显示组件包含为指令引用 .
简而言之，我应该拥有的是：
app.ts (view annotation)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
而且我还必须将我的显示组件导入 app.ts ：
import { DisplayComponent } from 'displ';
1 回答
请将
bootstrap(DisplayComponent);添加为nada已经指出 .来自quickstart：
所以是的，你真的需要为所有组件调用
bootstrap，除非它们是另一个组件的子组件 .