Angular для начинающих: компоненты, свойства и методы

Работа со свойствами компонента

Рассмотрим компонент, объявленный как export class CarComponent. Все переменные (свойства) и методы этого класса экспортируются и доступны в HTML-шаблоне. Свойства и переменные — это синонимы. Объявим свойство model со значением ‘bmw’. В HTML-шаблоне оно выводится как {{ model }}, отображая bmw.

Методы и изменение свойств

Класс может реализовывать интерфейсы, например, OnInit. Метод ngOnInit вызывается при создании компонента. В нём можно изменять свойства. Например:

ngOnInit() {
  this.model = 'audi';
}

После создания компонента, model изменится с ‘bmw’ на ‘audi’, и HTML-шаблон отобразит audi.

Указание типов данных свойств

Для повышения читаемости и предотвращения ошибок, указывайте типы данных свойств:

model: string = 'bmw';
speed: number = 235;

Здесь model имеет тип string, а speed — number. Значение можно задать при объявлении или позже, в ngOnInit.

Объекты и интерфейсы

Создадим свойство-объект colors со свойствами car, salon и wheels:

colors: {
  car: string;
  salon: string;
  wheels: string;
} = {
  car: 'white',
  salon: 'black',
  wheels: 'silver'
};

Для лучшей организации кода создадим интерфейс Colors:

interface Colors {
  car: string;
  salon: string;
  wheels: string;
}

Теперь свойство colors объявляется с типом Colors:

colors: Colors = {
  car: 'white',
  salon: 'black',
  wheels: 'silver'
};

Интерфейсы повышают читаемость и могут использоваться в разных компонентах.

Массивы и тип any

Свойства могут быть массивами. Например, массив options:

options: string[] = ['autopilot', 'parking', 'test'];

Свойство типа any может хранить значения любого типа:

test: any = 1; // или строка, или объект

В этом уроке изучены основы работы со свойствами и методами в компонентах Angular, создание объектов и использование интерфейсов, а также работа с массивами и типом any. В следующем уроке рассмотрим передачу данных в HTML-шаблоны и использование циклов и условных операторов.