趁着春天播下品牌的种子

小谭建站工作室品牌建设为你而来

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

本文名称：Angular中模板语法有哪些
网页地址：http://cdiso.cn/article/josgsh.html

其他资讯