Detaillierte Erläuterung der Vorlagensyntax in Angular

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Vorlagensyntax in Angular. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlene verwandte Tutorials: „Angular-Tutorial“

Interpolation. Ausdruck

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

Vorlage Variablen: test-template-variables.component.ts: ]

test-value-bind.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-value-bind.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>

Ereignisbindung: ()

test-event-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-event-bind.component.html

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

• Zwei-Wege-Bindung: [()]

test-twoway-binding.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- twoway- binding.component.html

fcbd673a522047e992aa60f819a1e8c0
    666a865bc6b58bd00bd75fb3013bf55d事件绑定16b28748ea4df4d9c2150843fecfba68
    4707d5d5b651f1cbaed9f4528beadc49
        bbad6abca5167ac9b50579c805497f98点击按钮65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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

}

font-resizer.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>

• Eingebaute Strukturanweisungen

• *ngIf

• Test -ng-if.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);
  }
}

• test-ng-if.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>

*ngFor

test-ng-for.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 -for.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>

• ngSwitch

test-ng-switch.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-switch.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>

• Eingebaute Attributanweisung

Die Beziehung zwischen HTML-Attributen und DOM-Attributen

• Es gibt eine Eins-zu-Eins-Zuordnungsbeziehung zwischen einer kleinen Anzahl von HTML-Attributen und DOM-Attributen, wie z. B. id;

Einige HTML-Attribute haben kein entsprechendes DOM Attribute, wie z. B. colspan;
• Einige DOM-Attribute haben keine entsprechenden HTML-Attribute, wie z. B. textContent;

Auch wenn die Namen gleich sind, sind HTML-Attribute und DOM-Attribute nicht dasselbe; Das Attribut gibt den Anfangswert an und der Wert des DOM-Attributs gibt den aktuellen Wert an. Der Wert des HTML-Attributs kann nicht geändert werden, der Wert der DOM-Eigenschaft kann geändert werden. Die Vorlagenbindung funktioniert über DOM-Eigenschaften und -Ereignisse, nicht über HTML-Attribute.

Hinweis:

Interpolationsausdruck und Eigenschaftsbindung sind dasselbe, und Interpolationsausdruck gehört zur DOM-Eigenschaftsbindung.

• NgClass
• test-ng-class.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-class.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>

test-ng-class.component.less

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

NgStyle

test-ng-style.component.ts

• <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-style.component.html

• .saveable {
      font-size: 18px;
  }
  
  .modified {
      font-weight: bold;
  }
  
  .special {
      background-color: #ff3300;
  }

NgModel

test-ng-model.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-model.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>

widget

pipeline

Winkelige integrierte gemeinsame Pipes:

• Großbuchstaben und Kleinbuchstaben

• Obere case Buchstaben in Großbuchstaben umwandeln {

{'aaa' |. Großbuchstaben}}

Kleinbuchstaben in Kleinbuchstaben umwandeln {{'BBB' | Kleinbuchstaben}}

{{ Geburtstagsdatum: 'JJJJ-MM-TT: ss'}}

Zahl

{

{ pi | Zahl: '2.2-2'}} 2.2-2: Es bedeutet, 2 ganze Zahlen und 2 Dezimalstellen beizubehalten.
2-2: Gibt mindestens 2 Dezimalstellen und maximal 2 Dezimalstellen an.

Example

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

}

testpipe.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>

non-Null Assertion

test-not-null-assert.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-not-null-assert.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>

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierunterricht
• ! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vorlagensyntax in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!