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

  
基插值语法
  
    
      欢迎来到 {{title}}！    
    
2+2 = {{2 + 2}}
    
调用方法{{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

登录后复制

内置结构型指令

*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的用法
  
    
显示内容
  

登录后复制

*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
    
  

登录后复制

内置属性型指令

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

  
NgClass用法
  
    
设置多个样式
    
  

登录后复制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批量修改内联样式！    
    
  

登录后复制

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 内置的常用管道：

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

    
管道的用法
    
      {{ 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}}  

登录后复制

更多编程相关知识，可访问：编程教学！！

以上就是详解Angular中的模板语法的详细内容，更多请关注【创想鸟】其它相关文章！