typescript Angular2 组件未呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31449232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 component not rendered
提问by Aviad P.
I have experience in AngularJS and am starting to learn Angular2. I am at the very beginning of my learning journey, but I'm already stuck.
我有 AngularJS 的经验，正在开始学习 Angular2。我正处于学习之旅的最开始阶段，但我已经陷入困境。
I can get one of my components to render, but not the other. I am using Visual Studio 2013 Ultimate and TypeScript 1.5 beta. Here's the source:
我可以让我的一个组件进行渲染，但不能渲染另一个。我使用的是 Visual Studio 2013 Ultimate 和 TypeScript 1.5 beta。这是来源：
index.html
索引.html
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/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';
}
}
The result is simply:
结果很简单：
Hello Alice
你好爱丽丝
Where did Bob go?
鲍勃去哪儿了？
Thanks!
谢谢！
UPDATE
更新
I realize that I was trying to do it the wrong way. My intention was to have the displaycomponent nested inside the my-appcomponent, but the template of my-appdidn't include the necessary ingredients:
我意识到我试图以错误的方式去做。我的目的是让display组件嵌套在my-app组件内，但模板my-app没有包含必要的成分：
- It didn't include a
<display></display>element. This was instead included in the top levelindex.htmlwhich was the wrong place for it. - The view annotation didn't include the display component as a directive reference.
- 它没有包含一个
<display></display>元素。这反而被包含在顶层index.html，这是错误的地方。 - 视图注释不包括显示组件作为指令引用。
In short, what I should have had was:
简而言之，我应该拥有的是：
app.ts (view annotation)
app.ts（查看注释）
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
And also I had to import my display component into app.ts:
而且我还必须将我的显示组件导入app.ts：
import { DisplayComponent } from 'displ';
回答by Jesse Good
Please add bootstrap(DisplayComponent);as nadaalready points out.
请补充，bootstrap(DisplayComponent);因为nada已经指出。
From the quickstart:
从快速入门：
The bootstrap() function takes a component as a parameter, enabling the component (as well as any child components it contains) to render.
bootstrap() 函数将一个组件作为参数，使该组件（以及它包含的任何子组件）能够渲染。
So yes, you really need to call bootstrapfor all components unless they are a child of another component.
所以是的，您确实需要调用bootstrap所有组件，除非它们是另一个组件的子组件。
