recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de la syntaxe du modèle dans Angular

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

青灯夜游
青灯夜游avant
2021-04-23 10:37:211744parcourir

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

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

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() {
  }
}
  • test-value-bind.component.html
<div class="panel panel-primary">
  <div class="panel-heading">单向值绑定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
  </div>
</div>

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;);
  }
}
  • test-event-bind.component.html
fcbd673a522047e992aa60f819a1e8c0
    666a865bc6b58bd00bd75fb3013bf55d事件绑定16b28748ea4df4d9c2150843fecfba68
    4707d5d5b651f1cbaed9f4528beadc49
        bbad6abca5167ac9b50579c805497f98点击按钮65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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

}
  • 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: &#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);
  }
}
  • 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>

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() {
  }
}
  • 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: &#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() {
  }

}
  • 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: &#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() {
  }

}
  • 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>

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
    };
  }
}
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>
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: &#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;
    };
  }

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

}
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>
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
  • test-pipe.component.ts
@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);
  }
}

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>

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

}
test-not-null- assert.component.html
  • <div class="panel panel-primary">
  <div class="panel-heading">安全取值</div>
  <div class="panel-body">
    名字：{{currentValue?.name}}
  </div>
</div>
    • 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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Quels sont les types de données qui ne font pas partie de javascript ?Article suivant：Quels sont les types de données qui ne font pas partie de javascript ?

Articles Liés

Voir plus