1、文件结构
angular-tour-of-heroes
各模块作用:
1》app.component.ts //APP的入口,主结构
2》app.modules.ts //引入需要的组件
3》hero.ts //声明的公共的类
4》hero-detail //声明子组件
2、一个简单的例子
- import{Component,Input}from'@angular/core';
- import{Hero}from'./hero';
- @Component({
- selector:'hero-detail',
- template:`
- <div *ngIf="hero">
- <h2>{{hero.name}} details!</h2>
- <div><label>id: </label>{{hero.id}}</div>
- <div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name"/>
- </div>
- </div>
- `
- })
- exportclassHeroDetailComponent{
- @Input() hero:Hero;
- }
- import{Component}from'@angular/core';
- import{Hero}from'./hero';
- const HEROES:Hero[]=[
- { id:11, name:'Mr. Nice'},
- { id:12, name:'Narco'},
- { id:13, name:'Bombasto'},
- { id:14, name:'Celeritas'},
- { id:15, name:'Magneta'},
- { id:16, name:'RubberMan'},
- { id:17, name:'Dynama'},
- { id:18, name:'Dr IQ'},
- { id:19, name:'Magma'},
- { id:20, name:'Tornado'}
- ];
- @Component({
- selector:'my-app',
- template:`
- <h1>{{title}}</h1>
- <h2>My Heroes</h2>
- <ul class="heroes">
- <li *ngFor="let hero of heroes"
- [class.selected]="hero === selectedHero"
- (click)="onSelect(hero)">
- <span class="badge">{{hero.id}}</span> {{hero.name}}
- </li>
- </ul>
- <hero-detail [hero]="selectedHero"></hero-detail>
- `,
- styles:[`
- .selected {
- background-color: #CFD8DC !important;
- color: white;
- }
- .heroes {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 15em;
- }
- .heroes li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
- }
- .heroes li.selected:hover {
- background-color: #BBD8DC !important;
- color: white;
- }
- .heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
- }
- .heroes .text {
- position: relative;
- top: -3px;
- }
- .heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
- }
- `]
- })
- export class AppComponent{
- title ='Tour of Heroes';
- heroes = HEROES;
- selectedHero:Hero;
- onSelect(hero:Hero):void{
- this.selectedHero= hero;
- }
- }
export class Hero{ id: number; name:string;}
- import{NgModule}from'@angular/core';
- import{BrowserModule}from'@angular/platform-browser';
- import{FormsModule}from'@angular/forms';
- import{AppComponent}from'./app.component';
- import{HeroDetailComponent}from'./hero-detail.component';
- @NgModule({
- imports:[
- BrowserModule,
- FormsModule
- ],
- declarations:[
- AppComponent,
- HeroDetailComponent
- ],
- bootstrap:[AppComponent]
- })
- export class AppModule{}
3、修饰器
@component
1> selector 主要指向组件的类名,指定该组件被使用的名
- @Component({
- changeDetection?:ChangeDetectionStrategy
- viewProviders?:Provider[]
- moduleId?: string
- templateUrl?: string
- template?: string
- styleUrls?: string[]
- styles?: string[]
- animations?: any[]
- encapsulation?:ViewEncapsulation
- interpolation?:[string, string]
- entryComponents?:Array<Type<any>|any[]>
- preserveWhitespaces?: boolean
- // inherited fromcore/Directive
- selector?: string
- inputs?: string[]
- outputs?: string[]
- host?:{[key: string]: string}
- providers?:Provider[]
- exportAs?: string
- queries?:{[key: string]: any}
- })
@Directive({selector?: stringinputs?: string[]outputs?: string[]host?:{[key: string]: string}providers?:Provider[]exportAs?: stringqueries?:{[key: string]: any}})
- @Directive({
- selector:'interval-dir',
- outputs:['everySecond','five5Secs: everyFiveSeconds']
- })
- classIntervalDir{
- everySecond =newEventEmitter();
- five5Secs =newEventEmitter();
- constructor(){
- setInterval(()=>this.everySecond.emit("event"),1000);
- setInterval(()=>this.five5Secs.emit("event"),5000);
- }
- }
- @Component({
- selector:'app',
- template:`
- <interval-dir(everySecond)="everySecond()"(everyFiveSeconds)="everyFiveSeconds()">
- </interval-dir>
- `
- })
- classApp{
- everySecond(){ console.log('second');}
- everyFiveSeconds(){ console.log('five seconds');}
- }
- @Directive({
- selector:'button[counting]',
- host:{
- '(click)':'onClick($event.target)'
- }
- })
- classCountClicks{
- numberOfClicks =0;
- onClick(btn){
- console.log("button", btn,"number of clicks:",this.numberOfClicks++);
- }
- }
- @Component({
- selector:'app',
- template:`<button counting>Increment</button>`
- })
- classApp{}
- classGreeter{
- greet(name:string){
- return'Hello '+ name+'!';
- }
- }
- @Directive({
- selector:'greet',
- providers:[
- Greeter
- ]
- })
- classHelloWorld{
- greeter:Greeter;
- constructor(greeter:Greeter){
- this.greeter= greeter;
- }
- }
@input