用12个例子全面示范Angular的模板语法

template分支，用12个例子全面示范Angular的模板语法

// 使用方法
git clone https://git.oschina.net/mumu-osc/learn-component.git
cd learn-component
git pull origin template
npm install 
ng serve

1.基本插值语法

// test-interpolation.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-interpolation',
  templateUrl: './test-interpolation.component.html',
  styleUrls: ['./test-interpolation.component.css']
})
export class TestInterpolationComponent implements OnInit {
  public title = '假的星际争霸2';  
  constructor() { }

  ngOnInit() {
  }

  public getVal():any{
    return 65535;
  }
}

<!-- test-interpolation.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">基本插值语法</div>
  <div class="panel-body">
    <h3>
      欢迎来到{{title}}！
    </h3>
    <h3>1+1={{1+1}}</h3>
    <h3>可以调用方法{{getVal()}}</h3>
  </div>
</div>

2.模板内的局部变量

// test-temp-ref-var.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-temp-ref-var',
  templateUrl: './test-temp-ref-var.component.html',
  styleUrls: ['./test-temp-ref-var.component.css']
})
export class TestTempRefVarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public sayHello(name:string):void{
    alert(name);
  }
}

<!-- test-temp-ref-var.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">模板内的局部变量</div>
  <div class="panel-body">
    <input #heroInput>
    <p>{{heroInput.value}}</p>
    <button class="btn btn-success" (click)="sayHello(heroInput.value)">局部变量</button>
  </div>
</div>

3.单向值绑定

// test-value-bind.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-value-bind',
  templateUrl: './test-value-bind.component.html',
  styleUrls: ['./test-value-bind.component.css']
})
export class TestValueBindComponent implements OnInit {
  public imgSrc:string="./assets/imgs/1.jpg";

  constructor() { }

  ngOnInit() {
  }

  public changeSrc():void{
    if(Math.ceil(Math.random()*1000000000)%2){
      this.imgSrc="./assets/imgs/2.jpg";
    }else{
      this.imgSrc="./assets/imgs/1.jpg";
    }
  }
}

<!-- test-value-bind.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">单向值绑定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
    <button class="btn btn-success" (click)="changeSrc()">修改图片src</button>
  </div>
</div>

4.事件绑定

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-event-binding',
  templateUrl: './test-event-binding.component.html',
  styleUrls: ['./test-event-binding.component.css']
})
export class TestEventBindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public btnClick(event):void{
    alert("测试事件绑定！");
  }
}

<div class="panel panel-primary">
  <div class="panel-heading">事件绑定</div>
  <div class="panel-body">
      <button class="btn btn-success" (click)="btnClick($event)">测试事件</button>
  </div>
</div>

5.双向绑定

// test-twoway-binding.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-twoway-binding',
  templateUrl: './test-twoway-binding.component.html',
  styleUrls: ['./test-twoway-binding.component.css']
})
export class TestTwowayBindingComponent implements OnInit {
  public fontSizePx:number=14;
  
  constructor() { }

  ngOnInit() {
  }

}

<!-- test-twoway-binding.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">双向绑定</div>
  <div class="panel-body">
    <font-resizer [(size)]="fontSizePx"></font-resizer>
    <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  </div>
</div>

// font-resizer.component.ts
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'font-resizer',
  templateUrl: './font-resizer.component.html',
  styleUrls: ['./font-resizer.component.css']
})
export class FontResizerComponent implements OnInit {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  
  constructor() { }

  ngOnInit() {
  }

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }
 
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

<!-- font-resizer.component.html -->
<div style="border: 2px solid #333">
  <p>这是子组件</p>
  <button (click)="dec()" title="smaller">-</button>
  <button (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

6.*ngIf的用法

// test-ng-if.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-ng-if',
  templateUrl: './test-ng-if.component.html',
  styleUrls: ['./test-ng-if.component.css']
})
export class TestNgIfComponent implements OnInit {
  public isShow:boolean=true;

  constructor() { }

  ngOnInit() {
  }

  public toggleShow():void{
    this.isShow=!this.isShow;
  }
}

<div class="panel panel-primary">
  <div class="panel-heading">*ngIf的用法</div>
  <div class="panel-body">
    <p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示？</p>
    <button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button>
  </div>
</div>

7.*ngFor用法

// test-ng-for.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-ng-for',
  templateUrl: './test-ng-for.component.html',
  styleUrls: ['./test-ng-for.component.css']
})
export class TestNgForComponent implements OnInit {
  public races:Array<any>=[
    {name:"人族"},
    {name:"虫族"},
    {name:"神族"}
  ];
  
  constructor() { }

  ngOnInit() {
  }

}

<!-- test-ng-for.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">*ngFor用法</div>
  <div class="panel-body">
    <h3>请选择一个种族</h3>
    <ul>
      <li *ngFor="let race of races;let i=index;">
        {{i+1}}-{{race.name}}
      </li>
    </ul>
  </div>
</div>

8.NgClass用法

// test-ng-class.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-ng-class',
  templateUrl: './test-ng-class.component.html',
  styleUrls: ['./test-ng-class.component.scss']
})
export class TestNgClassComponent implements OnInit {
  public currentClasses: {};

  public canSave: boolean = true;
  public isUnchanged: boolean = true;
  public isSpecial: boolean = true;

  constructor() { }

  ngOnInit() {

  }

  setCurrentClasses() {
    this.currentClasses = {
      'saveable': this.canSave,
      'modified': this.isUnchanged,
      'special': this.isSpecial
    };
  }
}

<!-- test-ng-class.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">NgClass用法</div>
  <div class="panel-body">
    <div [ngClass]="currentClasses">同时批量设置多个样式</div>
    <button class="btn btn-success" (click)="setCurrentClasses()">设置</button>
  </div>
</div>

9.NgStyle用法

// test-ng-style.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-ng-style',
  templateUrl: './test-ng-style.component.html',
  styleUrls: ['./test-ng-style.component.css']
})
export class TestNgStyleComponent implements OnInit {
  public currentStyles: {}
  public canSave:boolean=false;
  public isUnchanged:boolean=false;
  public isSpecial:boolean=false;
  
  constructor() { }

  ngOnInit() {
  }

  setCurrentStyles() {
    this.currentStyles = {
      'font-style':  this.canSave      ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
      'font-size':   this.isSpecial    ? '24px'   : '12px'
    };
  }
}

<!-- test-ng-style.component.html -->
<div class="panel panel-primary">
  <div class="panel-heading">NgStyle用法</div>
  <div class="panel-body">
    <div [ngStyle]="currentStyles">
      用NgStyle批量修改内联样式！
    </div>
    <button class="btn btn-success" (click)="setCurrentStyles()">设置</button>
  </div>
</div>

10.NgModel的用法

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-ng-model',
  templateUrl: './test-ng-model.component.html',
  styleUrls: ['./test-ng-model.component.css']
})
export class TestNgModelComponent implements OnInit {
  public currentRace:any={name:"随机种族"};

  constructor() { }

  ngOnInit() {
  }

}

<div class="panel panel-primary">
  <div class="panel-heading">NgModel的用法</div>
  <div class="panel-body">
      <p class="text-danger">ngModel只能用在表单类的元素上面</p>
      <input [(ngModel)]="currentRace.name">
      <p>{{currentRace.name}}</p>
  </div>
</div>

11.管道的用法

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-pipe',
  templateUrl: './test-pipe.component.html',
  styleUrls: ['./test-pipe.component.css']
})
export class TestPipeComponent implements OnInit {
  public currentTime: Date = new Date();
  
  constructor() { 
    window.setInterval(
			()=>{this.currentTime=new Date()}
		,1000);
  }

  ngOnInit() {
  }
}

<div class="panel panel-primary">
  <div class="panel-heading">管道的用法</div>
  <div class="panel-body">
      {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
  </div>
</div>

12.安全取值

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-safe-nav',
  templateUrl: './test-safe-nav.component.html',
  styleUrls: ['./test-safe-nav.component.css']
})
export class TestSafeNavComponent implements OnInit {
  public currentRace:any=null;//{name:'神族'};

  constructor() { }

  ngOnInit() {
  }

}

<div class="panel panel-primary">
  <div class="panel-heading">安全取值</div>
  <div class="panel-body">
    你选择的种族是：{{currentRace?.name}}
  </div>
</div>