Angular中模板語法有哪些

這篇文章給大家分享的是有關Angular中模板語法有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

插值表達式

• test-interpolation.component.ts

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

  title = '插值表達式';

  constructor() { }

  ngOnInit() {
  }

  getValue(): string {
    return '值';
  }
}

• test-interpolation.component.html

<div class="panel panel-primary">
  <div class="panel-heading">基插值語法</div>
  <div class="panel-body">
    <h4>
      歡迎來到 {{title}}！
    </h4>
    <h4>2+2 = {{2 + 2}}</h4>
    <h4>調用方法{{getValue()}}</h4>
  </div>
</div>

模板變量

• test-template-variables.component.ts

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

  constructor() { }

  ngOnInit() {
  }

  public saveValue(value: string): void {
    console.log(value);
  }
}

• test-template-variables.component.html

<div class="panel panel-primary">
  <div class="panel-heading">模板變量</div>
  <div class="panel-body">
    <input #templateInput>
    <p>{{templateInput.value}}</p>
    <button class="btn btn-success" (click)="saveValue(templateInput.value)">局部變量</button>
  </div>
</div>

值綁定、事件綁定、雙向綁定

值綁定：[]

• test-value-bind.component.ts

@Component({
  selector: 'app-test-value-bind',
  templateUrl: './test-value-bind.component.html',
  styleUrls: ['./test-value-bind.component.css']
})
export class TestValueBindComponent implements OnInit {

  public imgSrc = './assets/imgs/1.jpg';

  constructor() { }

  ngOnInit() {
  }
}

• test-value-bind.component.html

<div class="panel panel-primary">
  <div class="panel-heading">單向值綁定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
  </div>
</div>

事件綁定：()

• test-event-bind-component.ts

@Component({
  selector: 'app-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: any): void {
    console.log(event + '測試事件綁定！');
  }
}

• test-event-bind.component.html

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

雙向綁定：[()]

• test-twoway-binding.component.ts

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

  public fontSizePx = 14;

  constructor() { }

  ngOnInit() {
  }

}

• test-twoway-binding.component.html

<div class="panel panel-primary">
  <div class="panel-heading">雙向綁定</div>
  <div class="panel-body">
    <app-font-resizer [(size)]="fontSizePx"></app-font-resizer>
    <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  </div>
</div>

• font-resizer.component.ts

@Component({
  selector: 'app-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() {
  }

  decrement(): void {
    this.resize(-1);
  }

  increment(): void {
    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)="decrement()" title="smaller">-</button>
  <button (click)="increment()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

內置結構型指令

*ngIf

• test-ng-if.component.ts

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

  isShow = true;

  constructor() { }

  ngOnInit() {
  }
}

• test-ng-if.component.html

<div class="panel panel-primary">
  <div class="panel-heading">*ngIf的用法</div>
  <div class="panel-body">
    <p *ngIf="isShow" style="background-color:#ff3300">顯示內容</p>
  </div>
</div>

*ngFor

• test-ng-for.component.ts

@Component({
  selector: 'app-test-ng-for',
  templateUrl: './test-ng-for.component.html',
  styleUrls: ['./test-ng-for.component.css']
})
export class TestNgForComponent implements OnInit {

  races = [
    {name: 'star'},
    {name: 'kevin'},
    {name: 'kent'}
  ];

  constructor() { }

  ngOnInit() {
  }

}

• test-ng-for.component.html

<div class="panel panel-primary">
  <div class="panel-heading">*ngFor用法</div>
  <div class="panel-body">
    <h4>名字列表</h4>
    <ul>
      <li *ngFor="let name of names;let i=index;">
       {{i}}-{{name.name}}
      </li>
    </ul>
  </div>
</div>

ngSwitch

• test-ng-switch.component.ts

@Component({
  selector: 'app-test-ng-switch',
  templateUrl: './test-ng-switch.component.html',
  styleUrls: ['./test-ng-switch.component.css']
})
export class TestNgSwitchComponent implements OnInit {

  status = 1;

  constructor() { }

  ngOnInit() {
  }

}

• test-ng-switch.component.html

<div class="panel panel-primary">
  <div class="panel-heading">ngSwitch用法</div>
  <div class="panel-body">
    <div [ngSwitch]="status">
      <p *ngSwitchCase="0">Good</p>
      <p *ngSwitchCase="1">Bad</p>
      <p *ngSwitchDefault>Exception</p>
    </div>
  </div>
</div>

內置屬性型指令

HTML 屬性與 DOM 屬性關系

• 少量的 HTML 屬性與 DOM 屬性之間有著一對一的映射關系， 如 id；

• 有些 HTML 屬性沒有對應的 DOM 屬性， 如 colspan；

• 有些 DOM 屬性沒有對應的 HTML 屬性， 如 textContent；

• 就算名字相同， HTML 屬性和 DOM 屬性也不是同一樣東西；

• HTML 屬性的值指定了初始值， DOM 屬性的值表示當前值； HTML 屬性的值不可改變， DOM 屬性的值可以改變。

• 模板綁定是通過 DOM 屬性和事件來工作的， 而不是 HTML 屬性。

注意： 插值表達式與屬性綁定是同一個東西， 插值表達式屬于 DOM 屬性綁定。

NgClass

• test-ng-class.component.ts

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

  public canSave = true;
  public isUnchanged = true;
  public isSpecial = true;

  constructor() { }

  ngOnInit() {
    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>
    <div [class.modified]='true'></div>
  </div>
</div>

• test-ng-class.component.less

.saveable {
    font-size: 18px;
}

.modified {
    font-weight: bold;
}

.special {
    background-color: #ff3300;
}

NgStyle

• test-ng-style.component.ts

@Component({
  selector: 'app-test-ng-style',
  templateUrl: './test-ng-style.component.html',
  styleUrls: ['./test-ng-style.component.css']
})
export class TestNgStyleComponent implements OnInit {

  currentStyles: { };
  canSave = false;
  isUnchanged = false;
  isSpecial = false;

  constructor() { }

  ngOnInit() {
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '36px' : '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>
    <div [style.font-size]="isSpecial? '36px' : '12px'"></div>
  </div>
</div>

NgModel

• test-ng-model.component.ts

@Component({
  selector: 'app-test-ng-model',
  templateUrl: './test-ng-model.component.html',
  styleUrls: ['./test-ng-model.component.css']
})
export class TestNgModelComponent implements OnInit {

  name = 'kevin';

  constructor() { }

  ngOnInit() {
  }

}

• test-ng-model.component.html

<div class="panel panel-primary">
    <div class="panel-heading">NgModel的用法</div>
    <div class="panel-body">
        <p class="text-danger">ngModel只能用在表單類的元素上面</p>
        <input type="text" name="name" [(ngModel)]="name">
    </div>
</div>

小工具

管道

Angular 內置的常用管道：

• uppercase 與 lowercase

uppercase 將字母轉換成大寫 {{‘aaa’ | uppercase}}
lowercase 將字母轉換成小寫 {{‘BBB’ | lowercase}}

• Date

{{ birthday | date: ‘yyyy-MM-dd HH:mm:ss’}}

• number

{{ pi | number: ‘2.2-2’}}
2.2-2: 表示是保留 2 位整數和 2 位小數。
2-2: 表示最少 2 位小數，最大 2 位小數。

• 示例

test-pipe.component.ts

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

  currentTime: Date = new Date();
  
  str = 'aaa';

  money = 34.567;


  constructor() {
  }

  ngOnInit() {
    window.setInterval(
      () => { this.currentTime = new Date() }
      , 1000);
  }
}

test-pipe.component.html

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

非空斷言

• test-not-null-assert.component.ts

@Component({
  selector: 'app-test-safe-nav',
  templateUrl: './test-not-null-assert.component.html',
  styleUrls: ['./test-not-null-assert.component.css']
})
export class TestSafeNavComponent implements OnInit {

  public currentValue: any = null;

  constructor() { }

  ngOnInit() {
  }

}

• test-not-null-assert.component.html

<div class="panel panel-primary">
  <div class="panel-heading">安全取值</div>
  <div class="panel-body">
    名字：{{currentValue?.name}}
  </div>
</div>

感謝各位的閱讀！關于“Angular中模板語法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！