用12個例子全面示範Angular的模板語法

時間 2020-06-15

原文原文鏈接

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>