Angular 学习（七）：模板语法

心已赠人 2021-09-29 01:50 302阅读 0赞

### 文章目录 ###

*   *   *  插值表达式
         *  模板变量
         *  值绑定、事件绑定、双向绑定
         *  内置结构型指令
         *  内置属性型指令
         *  小工具

### 插值表达式 ###

*  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">
        <h3>
          欢迎来到 {
       {title}}！
        </h3>
        <h3>2+2 = {
       {2 + 2}}</h3>
        <h3>调用方法{
       {getValue()}}</h3>
      </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

**双向绑定：\[()\]**

*  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">
        <h3>名字列表</h3>
        <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>