实例2角组件两次 [英] Instance Angular 2 Component Two times
问题描述
我想学习角2，所以我做一些的Hello World 的例子。
这里是我的code
boot.ts
从'angular2 /平台/浏览器的进口{}引导
进口{} AppComponent从'./app.component
进口{}的DataService从'./app.dataservice引导（AppComponent，[DataService的]）;
的index.html
...
＆LT;身体GT;
＆LT;你好世界＆GT;加载...＆LT; /你好世界＆GT;
＆LT;你好世界＆GT;加载...＆LT; /你好世界＆GT;
＆LT; /身体GT;
...
app.component.ts
进口{}组件从angular2 /核心;
进口{}的DataService从'./app.dataservice@零件（{
选择：你好，世界
模板：'＆LT; H1＆GT;您好{{}项}＆LT; / H1＆GT;'
}）出口类AppComponent {
项目：数组＆LT;号取代;
项目编号; 构造函数（DataService的：DataService的）{
this.items = dataService.getItems（）;
this.item = this.items [0];
}
}
app.dataservice.ts
出口类的DataService {
项目：数组＆LT;号取代; 构造函数（）{
this.items = [1,2,3];
} getItems（）{
返回this.items;
}
}
在code似乎做工精细，因为第一个的hello-world 自定义标签被正确使用<$ C $里面的code表现C> TS 。如何有史以来第二个你好世界标签没有转化。只有一个自定义元素的显示。
不能大于1的自定义标签吗？我该怎么做？
修改
我已经添加了新的进口内app.components.ts
进口{} ByeWorld从'./app.byeworld';
和 app.byeworld.ts
进口{}组件从angular2 /核心;@零件（{
选择：再见，世界，
模板：'＆LT; H1＆GT;再见世界＆LT; / H1＆GT;'
}）出口类ByeWorld {
构造函数（）{
}
}
就像标准的HTML页面应该有一个＆LT;身体GT; 标签内容和一个＆LT; HEAD＆gt;作为元数据标签，Angular2应用程序应该有一个根标签。为了让你必须初始化它的应用程序工作（角度讲，它是一个应用程序）和你做，通过调用引导（）功能。
如果你烦恼，你的根标签（例如＆LT;应用＆GT; ）是身体里面，你还可以从定制标签选择更改应用标准标记体。如果添加不同的组件作为根，是这样的：
从'angular2 /平台/浏览器的进口{}引导
进口{}组件从angular2 /核心;
进口{} AppComponent从'./app.component
进口{}的DataService从'./app.dataservice@零件（{
选择：身体，
指令：[AppComponent]
模板：`
＆LT;你好世界＆GT;加载...＆LT; /你好世界＆GT;
＆LT;你好世界＆GT;加载...＆LT; /你好世界＆GT;
`
}）
类RootComponent {}引导（RootComponent，[DataService的]）;
...您的code的其余部分应该工作。
当然，如果在你的HTML，你需要有其他的东西（非应用程序内容，或者其它角度应用），你会不会选择体作为根选择器您Angular2应用。
希望这有助于你了解事情做得更好...
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. How ever the second hello-world tag is not transformed. Only one custom element is showed.
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() {
}
}
Just as standard HTML page should have one <body> tag for content and one <head> tag for 'metadata', an Angular2 application should have one root tag. To make app work you have to initialize it (tell Angular that it is an app) and you do that by calling bootstrap() function.
If it bothers you that your root tag (for example <app>) is inside the body, you can change selector from custom tag app to standard tag body. If you add different component as root, like this:
import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'
@Component({
selector: 'body',
directives: [AppComponent],
template: `
<hello-world>Loading...</hello-world>
<hello-world>Loading...</hello-world>
`
})
class RootComponent {}
bootstrap(RootComponent, [DataService]);
...the rest of your code should work.
Of course, if in your HTML you need to have other stuff (non-app content, or other angular apps) you wouldn't select body as root selector for your Angular2 app.
Hope this helps you understand things better...
这篇关于实例2角组件两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
