实例Angular 2组件两次
Pab*_*blo 14 javascript typescript angular
我正在尝试学习Angular 2,所以我做了一些hello world例子.这是我的代码:
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;
}
}
代码似乎工作正常,因为第一个hello-world自定义标记正在使用内部的代码正确显示ts.但是,第二个hello-world tag is not transformed.仅显示一个自定义元素.
不能超过1个自定义标签？我怎样才能做到这一点？
编辑
我在app.components.ts中添加了新的导入
import {ByeWorld} from './app.byeworld';
并在app.byeworld.ts
import {Component} from 'angular2/core';
@Component({
selector: 'bye-world',
template: '<h1>Bye World</h1>'
})
export class ByeWorld {
constructor() {
}
}
我测试了这个.您不能使用相同的名称制作多个 Angular 2主要组件.但是你可以为非主要组件制作任意数量的组件.
主要和非主要组成部分如何区分？
主要组件是被引导的组件.
看看屏幕截图.
我的主要组件叫做:我在HTML中创建了两次:
<body>
<my-app>Loading...</my-app>
<my-app>Loading...</my-app>
</body>
正如您所看到的,loading图片底部有一个结尾处.
但是,它适用于非主要组件.正如您所见,my-hero-detail可以尽可能多地创建组件.
<div class="center-align">
<h1>{{title}}</h1>
</div>
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m6">
<div id="my-heroes" class="card">
<div class="card-header">
<span>My Heroes</span>
</div>
<div class="card-content">
<ul class="heroes">
<li *ngFor="#hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
</div>
</div>
</div>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
<div class="row">
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
我的英雄细节组件:
import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail/hero-detail.html',
inputs: ['hero'],
})
export class HeroDetailComponent {
public hero: Hero;
}
- 主要和非主要成分如何区分？自举的组件是主要组件.正确？ (2认同)
正如标准 HTML 页面应该有一个<body>内容标签和一个<head>“元数据”标签一样，Angular2 应用程序也应该有一个根标签。要使应用程序工作，您必须初始化它（告诉 Angular 它是一个应用程序），然后通过调用bootstrap()函数来完成此操作。
如果您对根标签（例如<app>）位于正文内部感到困扰，您可以将选择器从自定义标签更改app为标准标签body。如果您将不同的组件添加为 root，如下所示：
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]);
...你的其余代码应该可以工作。
当然，如果在 HTML 中您需要有其他内容（非应用程序内容或其他角度应用程序），您不会选择body作为 Angular2 应用程序的根选择器。
希望这可以帮助您更好地理解事物......
| 归档时间： |
|
| 查看次数： |
19230 次 |
| 最近记录： |