真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

<tr id="sywe4"><s id="sywe4"></s></tr>

重慶分公司

重慶分公司

028-86922220

Angular中模板語法有哪些

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

創(chuàng)新互聯(lián)建站專注于石河子企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。石河子網(wǎng)站建設(shè)公司,為石河子等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

插值表達式

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


  基插值語法

歡迎來到 {{title}}！

2+2 = {{2 + 2}}

調(diào)用方法{{getValue()}}

模板變量

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


  模板變量
  
    
    {{templateInput.value}}
    局部變量

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

值綁定：[]

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


  單向值綁定

事件綁定：()

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


  雙向綁定
  
    
    Resizable Text

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();

  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


  這是子組件
  -
  +
  FontSize: {{size}}px

內(nèi)置結(jié)構(gòu)型指令

*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


  *ngIf的用法
  
    顯示內(nèi)容

*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


  *ngFor用法
  
    名字列表
    
      
       {{i}}-{{name.name}}

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


  ngSwitch用法
  
    
      Good
      Bad
      Exception

內(nèi)置屬性型指令

HTML 屬性與 DOM 屬性關(guān)系

少量的 HTML 屬性與 DOM 屬性之間有著一對一的映射關(guān)系，如 id；
有些 HTML 屬性沒有對應(yīng)的 DOM 屬性，如 colspan；
有些 DOM 屬性沒有對應(yīng)的 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


  NgClass用法
  
    設(shè)置多個樣式

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


  NgStyle用法
  
    
      用NgStyle批量修改內(nèi)聯(lián)樣式！

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


    NgModel的用法
    
        ngModel只能用在表單類的元素上面

小工具

管道

Angular 內(nèi)置的常用管道：

uppercase 與 lowercase

uppercase 將字母轉(zhuǎn)換成大寫 {{‘a(chǎn)aa’ | uppercase}}
lowercase 將字母轉(zhuǎn)換成小寫 {{‘BBB’ | lowercase}}

Date

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

number

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

示例

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


    管道的用法
    
      {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
    
    
      {{ str | uppercase }}
    
    
      {{ money | number: '2.2-2' }}

非空斷言

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


  安全取值
  
    名字：{{currentValue?.name}}

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

新聞名稱：Angular中模板語法有哪些
本文URL：http://weahome.cn/article/josgsh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部

<kbd id="m6ukg"><option id="m6ukg"></option></kbd>

<nav id="m6ukg"></nav>

<bdo id="m6ukg"></bdo>