I'm trying to learn Angular 2, so I was making some hello world examples.
Here is my code:
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'
bootstrap(AppComponent, [DataService]);
index.html
...
<body>
<hello-world>Loading...</hello-world>
<hello-world>Loading...</hello-world>
</body>
...
app.component.ts
import {Component} from 'angular2/core';
import {DataService} from './app.dataservice'
@Component({
selector: 'hello-world',
template: '<h1>Hello {{ item }}</h1>'
})
export class AppComponent {
items: Array<number>;
item: number;
constructor(dataService: DataService) {
this.items = dataService.getItems();
this.item = this.items[0];
}
}
app.dataservice.ts
export class DataService {
items: Array<number>;
constructor() {
this.items = [1,2,3];
}
getItems() {
return this.items;
}
}
The code seems to work fine since the first hello-world custom tag is being correctly showed with the code inside the ts. However, the second hello-world tag is not transformed. Only one custom element is shown.
Can't be more than 1 custom tag? How can I do that?
EDIT
I have added the new import inside app.components.ts
import {ByeWorld} from './app.byeworld';
and in app.byeworld.ts
import {Component} from 'angular2/core';
@Component({
selector: 'bye-world',
template: '<h1>Bye World</h1>'
})
export class ByeWorld {
constructor() {
}
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
