Avi*_* P. 14 typescript angular
我有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';
}
}
结果很简单:
你好爱丽丝
鲍勃去哪儿了？
谢谢!
UPDATE
我意识到我试图以错误的方式做到这一点.我的目的是让display组件嵌套在my-app组件中,但模板my-app不包含必要的组件:
<display></display>元素.相反,index.html它被包含在顶层,这是错误的地方.简而言之,我应该拥有的是:
app.ts(查看注释)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
而且我还必须将我的显示组件导入app.ts:
import { DisplayComponent } from 'displ';