angular组件的基本使用
组件
组件模板
-
ng generate component xxx 新建组件(大驼峰命名)
-
属性绑定
<img [src]="imgSrc" /> public imgSrc:string="./assets/imgs/1.jpg";
-
事件绑定
<button class="btn btn-success" (click)="btnClick($event)">测试事件</button> public btnClick(event):void{ alert("测试事件绑定!"); }
-
双向绑定
<font-resizer [(size)]="fontSizePx"></font-resizer> public fontSizePx:number=14;
-
结构型指令
-
*ngIf
<p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示?</p> <button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button> public isShow:boolean=true; public toggleShow():void{ this.isShow=!this.isShow; }
-
*ngFor
<li *ngFor="let race of races;let i=index;"> {{i+1}}-{{race.name}} </li> public races:Array<any>=[ {name:"人族"}, {name:"虫族"}, {name:"神族"} ];
-
*ngSwitch[匹配值]
<div [ngSwitch]="mapStatus"> <p *ngSwitchCase="0">下载中...</p> <p *ngSwitchCase="1">正在读取...</p> <p *ngSwitchDefault>系统繁忙...</p> </div> public mapStatus:number=1;
-
-
属性型指令
-
NgClass
<div [ngClass]="currentClasses">同时批量设置多个样式</div> <button class="btn btn-success" (click)="setCurrentClasses()">设置</button> public currentClasses: {}; public canSave: boolean = true; public isUnchanged: boolean = true; public isSpecial: boolean = true; setCurrentClasses() { this.currentClasses = { 'saveable': this.canSave, 'modified': this.isUnchanged, 'special': this.isSpecial }; } .saveable{ font-size: 18px; } .modified { font-weight: bold; } .special{ background-color: #ff3300; }
-
NgStyle
<div [ngStyle]="currentStyles"> 用 NgStyle 批量修改内联样式! </div> <button class="btn btn-success" (click)="setCurrentStyles()">设置</button> public currentStyles: {} public canSave:boolean=false; public isUnchanged:boolean=false; public isSpecial:boolean=false; setCurrentStyles() { this.currentStyles = { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '36px' : '12px' }; }
-
NgModel
<p class="text-danger">ngModel 只能用在表单类的元素上面 </p> <input [(ngModel)]="currentRace.name"> <p>{{currentRace.name}}</p> public currentRace:any={name:"随机种族"};
-
-
管道
{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}} public currentTime: Date = new Date();
常用管道
组件间的通讯
-
通讯方案
- 直接的父子关系,父组件直接访问子组件的 public 属性和方法
- 直接的父子关系,借助于 @Input 和 @Output 进行通讯
- 没有直接关系,借助于 Service 单例进行通讯
- 利用 cookie 和 localstorage 进行通讯
- 利用 Session 进行通讯
-
直接调用
-
父组件访问子组件方法
//子组件定义一个public的方法,父组件直接调用 //子组件 public children():void{ alert("I am a children"); } //父组件模板 <app-child #child></app-child> <button (click)="child.children()" class="btn btn-success">直接调用子组件</button>
-
父组件导入子组件直接访问
//子组件 @ViewChild(ChildComponent) private childComponent: ChildComponent;
-
-
@Input 和 @Output
-
@Input ,在父组件设置子组件的属性
//子组件 @Input() public panelTitle:string; //父组件上可以这样设置 panelTitle 这个参数 <child panelTitle="一个新的标题"></child>
-
@Output
-
子组件调用父组件的事件
//子组件 (click)="emitAnEvent()" @Output() public follow=new EventEmitter<string>(); public emitAnEvent(event):void{ this.follow.emit('follow') } //父组件 (follow)="doSomething()"
-
-
-
利用 Service 单例进行通讯
-
利用 cookie 或者 localstorage 进行通讯
-
利用 Session 进行通讯
注意
- 组件模板-双向绑定 [()]
- 发布ng build --prod(压缩代码) --source-map 帮助调试
- ng test 单元测试
- 项目检出,git checkout template