angular组件的基本使用

<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;

<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;
}

<li *ngFor="let race of races;let i=index;">
    {{i+1}}-{{race.name}}
</li>

public races:Array<any>=[
    {name:"人族"},
    {name:"虫族"},
    {name:"神族"}
];

<div [ngSwitch]="mapStatus">
    <p *ngSwitchCase="0">下载中...</p>
    <p *ngSwitchCase="1">正在读取...</p>
    <p *ngSwitchDefault>系统繁忙...</p>
</div>

public mapStatus:number=1;

<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;
}

<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'
    };
}

<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的方法,父组件直接调用
//子组件
  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()
public panelTitle:string;
//父组件上可以这样设置 panelTitle 这个参数
<child panelTitle="一个新的标题"></child>

//子组件
(click)="emitAnEvent()"

  @Output()
  public follow=new EventEmitter<string>();
  public emitAnEvent(event):void{
    this.follow.emit('follow')
  }
//父组件
 (follow)="doSomething()"