Angular 8: string interpolation

Wprowadzenie

Interpolacja łańcuchów tekstowych jest również przykładem jednokierunkowego wiązania danych. Używana jest do łączenia danych z kodu TypeScript z szablonem/widokiem HTML. Wiązanie polega na użyciu podwójnych nawiasów klamrowych zgodnie z poniższym przykładem:

{{title}}

Temat ten został poruszony w poprzednim wpisie: Angular 8: property binding. Korzystając z podanego adresu jesteście również w stanie pobrać gotowy projekt i przystąpić do testów po swojej stronie.

Przykłady

Celem krótkiego przypomnienia poprzedniego wpisu (tam też poruszyliśmy temat String Interpolation) dokonamy drobej modyfikacji pliku string-interpolation.component.ts. Modyfikacja będzie polegała na dodaniu jednej właściwości, której wartość wyświetlimy po stronie widoku:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-string-interpolation',
  templateUrl: './string-interpolation.component.html',
  styleUrls: ['./string-interpolation.component.css']
})
export class StringInterpolationComponent{
  title = "Krótkie przypomnienie poprzedniego wpisu!";
}

Po stronie widoku również wprowadzimy drobne zmiany:

<p>Komponent przeznaczony dla: string-interpolation</p>

<br />
<h1>
<!-- String Interpolation -->
{{title}}
</h1>

A strona wyświetlana w przeglądarce prezentuje się w poniższy sposób: String Interpolation

Nic również nie stoi na przeszkodzie w łączeniu różnych właściwości, ich formatowaniu po stronie widoku czy dokonywaniu obliczeń matematycznych. W tym celu dodamy kilka z nich a następnie wyświetlimy podsumowanie:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-string-interpolation',
  templateUrl: './string-interpolation.component.html',
  styleUrls: ['./string-interpolation.component.css']
})
export class StringInterpolationComponent{
  title = "Krótkie przypomnienie poprzedniego wpisu!";

  brand = "Audi";
  model = "RS6";
  power: number = 580;

  // 1 KM = 0,74 kW
  converter: number = 0.74;
}

Zmiany po stronie widoku:

<p>Komponent przeznaczony dla: string-interpolation</p>

<br />
<h1>
    <!-- String Interpolation -->
    {{title}}
</h1>

<br />
<p>
    Jak możecie się domyslać moim ulubionym samochodem jest {{brand}} {{model}}!
</p>
<p>
    Jego moc wynosi: {{power}}KM
</p>
<p>
    A moc w kW to {{power * converter}}
</p>

Oraz efekt działania w przeglądarce: String Interpolation: kalkulacje

Pamiętajcie, że to tylko przykłady. Takich operacji nie powinniśmy wykonywać po stronie widoku. Widok jest konsumentem danych i powinien raczej mówić (a raczej osoba odpowiedzialna za tworzenie): w takim formacie oczekuje danych – np. danych już przeliczonych i gotowych do prezentacji. Dlatego też wprowadzimy kolejną modyfikację w kodzie – dodamy metodę w TypeScript, która będzie odpowiedzialna za dokonanie konwersji KM na kW:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-string-interpolation',
  templateUrl: './string-interpolation.component.html',
  styleUrls: ['./string-interpolation.component.css']
})
export class StringInterpolationComponent {
  title = "Krótkie przypomnienie poprzedniego wpisu!";

  brand = "Audi";
  model = "RS6";
  power: number = 580;

  // 1 KM = 0,74 kW
  converter: number = 0.74;

  // Metoda dokonująca konwersji KM na kW
  convertKMtokW() {
    return this.power * this.converter;
  }
}

Drobne modyfikacje po stronie widoku:

<p>Komponent przeznaczony dla: string-interpolation</p>

<br />
<h1>
    <!-- String Interpolation -->
    {{title}}
</h1>

<br />
<p>
    Jak możecie się domyslać moim ulubionym samochodem jest {{brand}} {{model}}!
</p>
<p>
    Jego moc wynosi: {{power}}KM
</p>
<p>
    A moc w kW to {{power * converter}}
</p>
<p>
    Używanie <strong>metod</strong> nie jest skomplikowane:
    <br />
    {{power}}KM = {{convertKMtokW()}}kW
</p>

Oraz rezultat działania aplikacji: String Interpolation: przykład metody