Explication détaillée de la syntaxe du modèle dans Angular-js tutoriel-php.cn

Cet article vous donnera une introduction détaillée à la syntaxe des modèles dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée de la syntaxe du modèle dans Angular

Tutoriels associés recommandés : "Tutoriel angulaire"

Expression d'interpolation

test-interpolation.component.ts

@Component({
  selector: &#39;app-test-interpolation&#39;,
  templateUrl: &#39;./test-interpolation.component.html&#39;,
  styleUrls: [&#39;./test-interpolation.component.css&#39;]
})
export class TestInterpolationComponent implements OnInit {

  title = &#39;插值表达式&#39;;

  constructor() { }

  ngOnInit() {
  }

  getValue(): string {
    return &#39;值&#39;;
  }
}

Copier après la connexion

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>

Copier après la connexion

Variables de modèle

test-template-variables.component.ts

@Component({
  selector: &#39;app-test-template-variables&#39;,
  templateUrl: &#39;./test-template-variables.component.html&#39;,
  styleUrls: [&#39;./test-template-variables.component.css&#39;]
})
export class TestTempRefVarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public saveValue(value: string): void {
    console.log(value);
  }
}

Copier après la connexion

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>

Copier après la connexion

Liaison de valeur, liaison d'événement, liaison bidirectionnelle

Liaison de valeur : []

test-value-bind.component.ts

@Component({
  selector: &#39;app-test-value-bind&#39;,
  templateUrl: &#39;./test-value-bind.component.html&#39;,
  styleUrls: [&#39;./test-value-bind.component.css&#39;]
})
export class TestValueBindComponent implements OnInit {

  public imgSrc = &#39;./assets/imgs/1.jpg&#39;;

  constructor() { }

  ngOnInit() {
  }
}

Copier après la connexion

test-value-bind.component.html

<div class="panel panel-primary">
  <div class="panel-heading">单向值绑定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
  </div>
</div>

Copier après la connexion

Liaison d'événement : ()

test- event-bind- composant.ts

@Component({
  selector: &#39;app-test-event-binding&#39;,
  templateUrl: &#39;./test-event-binding.component.html&#39;,
  styleUrls: [&#39;./test-event-binding.component.css&#39;]
})
export class TestEventBindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public btnClick(event: any): void {
    console.log(event + &#39;测试事件绑定！&#39;);
  }
}

Copier après la connexion

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>

Copier après la connexion

Liaison bidirectionnelle : [()]

test-twoway-binding.component.ts

@Component({
  selector: &#39;app-test-twoway-binding&#39;,
  templateUrl: &#39;./test-twoway-binding.component.html&#39;,
  styleUrls: [&#39;./test-twoway-binding.component.css&#39;]
})
export class TestTwowayBindingComponent implements OnInit {

  public fontSizePx = 14;

  constructor() { }

  ngOnInit() {
  }

}

Copier après la connexion

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>

Copier après la connexion

font-resizer.component.ts

@Component({
  selector: &#39;app-font-resizer&#39;,
  templateUrl: &#39;./font-resizer.component.html&#39;,
  styleUrls: [&#39;./font-resizer.component.css&#39;]
})
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);
  }
}

Copier après la connexion

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>

Copier après la connexion

Directives structurelles intégrées

*ngIf

test-ng-if.component.ts

@Component({
  selector: &#39;app-test-ng-if&#39;,
  templateUrl: &#39;./test-ng-if.component.html&#39;,
  styleUrls: [&#39;./test-ng-if.component.css&#39;]
})
export class TestNgIfComponent implements OnInit {

  isShow = true;

  constructor() { }

  ngOnInit() {
  }
}

Copier après la connexion

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>

Copier après la connexion

*ngFor

test-ng-for.component.ts

@Component({
  selector: &#39;app-test-ng-for&#39;,
  templateUrl: &#39;./test-ng-for.component.html&#39;,
  styleUrls: [&#39;./test-ng-for.component.css&#39;]
})
export class TestNgForComponent implements OnInit {

  races = [
    {name: &#39;star&#39;},
    {name: &#39;kevin&#39;},
    {name: &#39;kent&#39;}
  ];

  constructor() { }

  ngOnInit() {
  }

}

Copier après la connexion

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>

Copier après la connexion

ngSwitch

test-ng-switch.component.ts

@Component({
  selector: &#39;app-test-ng-switch&#39;,
  templateUrl: &#39;./test-ng-switch.component.html&#39;,
  styleUrls: [&#39;./test-ng-switch.component.css&#39;]
})
export class TestNgSwitchComponent implements OnInit {

  status = 1;

  constructor() { }

  ngOnInit() {
  }

}

Copier après la connexion

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>

Copier après la connexion

Directive d'attribut intégrée

La relation entre les attributs HTML et les attributs DOM

Il existe une relation de mappage un-à-un entre un petit nombre d'attributs HTML et les attributs DOM, tels que id;
Certains attributs HTML n'ont pas d'attributs DOM correspondants, comme colspan ;
Certains attributs DOM n'ont pas d'attributs HTML correspondants, comme textContent ; et les attributs DOM ne sont pas la même chose ;
La valeur de l'attribut HTML spécifie la valeur initiale, et la valeur de l'attribut DOM indique la valeur actuelle, la valeur de l'attribut HTML ne peut pas être modifiée ; la valeur de l'attribut DOM peut être modifiée.
La liaison de modèle fonctionne via les propriétés et les événements DOM, et non les attributs HTML.

Remarque :

L'expression d'interpolation et la liaison de propriété sont la même chose, et l'expression d'interpolation appartient à la liaison de propriété DOM.

NgClass

test-ng-class.component.ts

@Component({
  selector: &#39;app-test-ng-class&#39;,
  templateUrl: &#39;./test-ng-class.component.html&#39;,
  styleUrls: [&#39;./test-ng-class.component.scss&#39;]
})
export class TestNgClassComponent implements OnInit {
  public currentClasses: {};

  public canSave = true;
  public isUnchanged = true;
  public isSpecial = true;

  constructor() { }

  ngOnInit() {
    this.currentClasses = {
      &#39;saveable&#39;: this.canSave,
      &#39;modified&#39;: this.isUnchanged,
      &#39;special&#39;: this.isSpecial
    };
  }
}

Copier après la connexion

test-ng-class. composant.html

<div class="panel panel-primary">
  <div class="panel-heading">NgClass用法</div>
  <div class="panel-body">
    <div [ngClass]="currentClasses">设置多个样式</div>
    <div [class.modified]=&#39;true&#39;></div>
  </div>
</div>

Copier après la connexion

test-ng-class.component.less

.saveable {
    font-size: 18px;
}

.modified {
    font-weight: bold;
}

.special {
    background-color: #ff3300;
}

Copier après la connexion

NgStyle

test-ng-style.component.ts

@Component({
  selector: &#39;app-test-ng-style&#39;,
  templateUrl: &#39;./test-ng-style.component.html&#39;,
  styleUrls: [&#39;./test-ng-style.component.css&#39;]
})
export class TestNgStyleComponent implements OnInit {

  currentStyles: { };
  canSave = false;
  isUnchanged = false;
  isSpecial = false;

  constructor() { }

  ngOnInit() {
    this.currentStyles = {
      &#39;font-style&#39;: this.canSave ? &#39;italic&#39; : &#39;normal&#39;,
      &#39;font-weight&#39;: !this.isUnchanged ? &#39;bold&#39; : &#39;normal&#39;,
      &#39;font-size&#39;: this.isSpecial ? &#39;36px&#39; : &#39;12px&#39;
    };
  }

}

Copier après la connexion

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? &#39;36px&#39; : &#39;12px&#39;"></div>
  </div>
</div>

Copier après la connexion

NgModel

test-ng-model.component.ts

@Component({
  selector: &#39;app-test-ng-model&#39;,
  templateUrl: &#39;./test-ng-model.component.html&#39;,
  styleUrls: [&#39;./test-ng-model.component.css&#39;]
})
export class TestNgModelComponent implements OnInit {

  name = &#39;kevin&#39;;

  constructor() { }

  ngOnInit() {
  }

}

Copier après la connexion

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>

Copier après la connexion

Widgets

Pipeline

Tuyaux communs intégrés d'Angular :

majuscules et minuscules

majuscules Convertir les lettres en majuscules {

{'aaa' | majuscules}}
minuscules Convertir les lettres en minuscules {{'BBB' | minuscules}}

Date

{

{ date d'anniversaire : 'aaaa-MM-jj HH:mm:ss'}}

numéro

{

{ pi number : '2.2-2'}}
2.2-2 : indique qu'un entier à 2 chiffres et 2- les chiffres sont réservés en décimal. 2-2 : Indique un minimum de 2 décimales et un maximum de 2 décimales.

Exemple

@Component({
  selector: &#39;app-test-pipe&#39;,
  templateUrl: &#39;./test-pipe.component.html&#39;,
  styleUrls: [&#39;./test-pipe.component.css&#39;]
})
export class TestPipeComponent implements OnInit {

  currentTime: Date = new Date();
  
  str = &#39;aaa&#39;;

  money = 34.567;


  constructor() {
  }

  ngOnInit() {
    window.setInterval(
      () => { this.currentTime = new Date() }
      , 1000);
  }
}

Copier après la connexion

test-pipe.component.html

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

Copier après la connexion

Not-null-assert

test-not-null-assert.component.ts

@Component({
  selector: &#39;app-test-safe-nav&#39;,
  templateUrl: &#39;./test-not-null-assert.component.html&#39;,
  styleUrls: [&#39;./test-not-null-assert.component.css&#39;]
})
export class TestSafeNavComponent implements OnInit {

  public currentValue: any = null;

  constructor() { }

  ngOnInit() {
  }

}

Copier après la connexion

test-not-null- assert.component.html

```
<div class="panel panel-primary">
  <div class="panel-heading">安全取值</div>
  <div class="panel-body">
    名字：{{currentValue?.name}}
  </div>
</div>
```
Copier après la connexion
Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation
! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!