首頁  >  文章  >  web前端  >  詳解Angular中的模板文法

詳解Angular中的模板文法

青灯夜游
青灯夜游轉載
2021-04-23 10:37:211743瀏覽

本篇文章給大家詳細介紹一下Angular中的範本語法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

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

模板變數

    test-template-variables.component.ts
  • @Component({
      selector: &#39;app-test-template-variables&#39;,
      templateUrl: &#39;./test-template-variables.component.html&#39;,
      styleUrls: [&#39;./test-template-variables.component.css&#39;]
    })
    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: &#39;app-test-value-bind&#39;,
      templateUrl: &#39;./test-value-bind.component.html&#39;,
      styleUrls: [&#39;./test-value-bind.component.css&#39;]
    })
    export class TestValueBindComponent implements OnInit {
    
      public imgSrc = &#39;./assets/imgs/1.jpg&#39;;
    
      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: &#39;app-test-event-binding&#39;,
      templateUrl: &#39;./test-event-binding.component.html&#39;,
      styleUrls: [&#39;./test-event-binding.component.css&#39;]
    })
    export class TestEventBindingComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
      public btnClick(event: any): void {
        console.log(event + &#39;测试事件绑定!&#39;);
      }
    }
  • test-event-bind.component.html
    fcbd673a522047e992aa60f819a1e8c0
        666a865bc6b58bd00bd75fb3013bf55d事件绑定16b28748ea4df4d9c2150843fecfba68
        4707d5d5b651f1cbaed9f4528beadc49
            bbad6abca5167ac9b50579c805497f98点击按钮65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  • 雙向綁定:[()]

    test-twoway-binding.component.ts

      #
      @Component({
        selector: &#39;app-test-twoway-binding&#39;,
        templateUrl: &#39;./test-twoway-binding.component.html&#39;,
        styleUrls: [&#39;./test-twoway-binding.component.css&#39;]
      })
      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: &#39;app-font-resizer&#39;,
        templateUrl: &#39;./font-resizer.component.html&#39;,
        styleUrls: [&#39;./font-resizer.component.css&#39;]
      })
      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: &#39;app-test-ng-if&#39;,
        templateUrl: &#39;./test-ng-if.component.html&#39;,
        styleUrls: [&#39;./test-ng-if.component.css&#39;]
      })
      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: &#39;app-test-ng-for&#39;,
        templateUrl: &#39;./test-ng-for.component.html&#39;,
        styleUrls: [&#39;./test-ng-for.component.css&#39;]
      })
      export class TestNgForComponent implements OnInit {
      
        races = [
          {name: &#39;star&#39;},
          {name: &#39;kevin&#39;},
          {name: &#39;kent&#39;}
        ];
      
        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: &#39;app-test-ng-switch&#39;,
        templateUrl: &#39;./test-ng-switch.component.html&#39;,
        styleUrls: [&#39;./test-ng-switch.component.css&#39;]
      })
      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: &#39;app-test-ng-class&#39;,
        templateUrl: &#39;./test-ng-class.component.html&#39;,
        styleUrls: [&#39;./test-ng-class.component.scss&#39;]
      })
      export class TestNgClassComponent implements OnInit {
        public currentClasses: {};
      
        public canSave = true;
        public isUnchanged = true;
        public isSpecial = true;
      
        constructor() { }
      
        ngOnInit() {
          this.currentClasses = {
            &#39;saveable&#39;: this.canSave,
            &#39;modified&#39;: this.isUnchanged,
            &#39;special&#39;: 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]=&#39;true&#39;></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: &#39;app-test-ng-style&#39;,
        templateUrl: &#39;./test-ng-style.component.html&#39;,
        styleUrls: [&#39;./test-ng-style.component.css&#39;]
      })
      export class TestNgStyleComponent implements OnInit {
      
        currentStyles: { };
        canSave = false;
        isUnchanged = false;
        isSpecial = false;
      
        constructor() { }
      
        ngOnInit() {
          this.currentStyles = {
            &#39;font-style&#39;: this.canSave ? &#39;italic&#39; : &#39;normal&#39;,
            &#39;font-weight&#39;: !this.isUnchanged ? &#39;bold&#39; : &#39;normal&#39;,
            &#39;font-size&#39;: this.isSpecial ? &#39;36px&#39; : &#39;12px&#39;
          };
        }
      
      }
    • 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? &#39;36px&#39; : &#39;12px&#39;"></div>
        </div>
      </div>
    • NgModel

    test-ng-model.component.ts

      @Component({
        selector: &#39;app-test-ng-model&#39;,
        templateUrl: &#39;./test-ng-model.component.html&#39;,
        styleUrls: [&#39;./test-ng-model.component.css&#39;]
      })
      export class TestNgModelComponent implements OnInit {
      
        name = &#39;kevin&#39;;
      
        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: &#39;app-test-pipe&#39;,
        templateUrl: &#39;./test-pipe.component.html&#39;,
        styleUrls: [&#39;./test-pipe.component.css&#39;]
      })
      export class TestPipeComponent implements OnInit {
      
        currentTime: Date = new Date();
        
        str = &#39;aaa&#39;;
      
        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:&#39;yyyy-MM-dd HH:mm:ss&#39; }}
        </div>
        <div class="panel-body">
          {{ str | uppercase }}
        </div>
        <div class="panel-body">
          {{ money | number: &#39;2.2-2&#39; }}
        </div>
    </div>

    非空斷言

    test-not-null-assert.component.ts

      @Component({
        selector: &#39;app-test-safe-nav&#39;,
        templateUrl: &#39;./test-not-null-assert.component.html&#39;,
        styleUrls: [&#39;./test-not-null-assert.component.css&#39;]
      })
      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中的模板文法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 陳述:
    本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除