runsly js教程 2021-12-10

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

<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: '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

<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: '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

<div class="panel panel-primary">
    <div class="panel-heading">事件绑定</div>
    <div class="panel-body">
        <button class="btn btn-success" (click)="btnClick($event)">点击按钮</button>
    </div>
</div>

双向绑定：[()]

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

<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: '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<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: '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

<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: '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

<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: '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

<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: '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

<div class="panel panel-primary">
  <div class="panel-heading">NgClass用法</div>
  <div class="panel-body">
    <div [ngClass]="currentClasses">设置多个样式</div>
    <div [class.modified]='true'></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: '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

<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? '36px' : '12px'"></div>
  </div>
</div>

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

<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: '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

<div class="panel panel-primary">
    <div class="panel-heading">管道的用法</div>
    <div class="panel-body">
      {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
    </div>
    <div class="panel-body">
      {{ str | uppercase }}
    </div>
    <div class="panel-body">
      {{ money | number: '2.2-2' }}
    </div>
</div>

非空断言

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

<div class="panel panel-primary">
  <div class="panel-heading">安全取值</div>
  <div class="panel-body">
    名字：{{currentValue?.name}}
  </div>
</div>

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

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

插值表达式

模板变量

值绑定、事件绑定、双向绑定

内置结构型指令

内置属性型指令

小工具

runsly 钻石