四川盐亭网站制作公司

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

  

模板变量

@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);
  }
}

  模板变量
            

{{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中模板语法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


当前名称：Angular中模板语法有哪些
地址分享：http://scyanting.com/article/josgsh.html

其他资讯