Компоненты в Angular

Programming, development, testing

→

Angular

→

Компоненты в Angular

Looked at 3484 times

Компоненты в Angular

last updated: 24 Augusta 2020

Компонента это представление.
Компонента отображается на экране в виде HTML элементов.

Example

Файл app.component.ts

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

@Component({
     selector: 'my-app',
     template: `<label>Введите имя:</label>
          <input [(ngModel)]="name" placeholder="name">
          <h1>Добро пожаловать {{name}}!</h1>`
})
export class AppComponent {
     name: "";
}

Объяснение

Чтобы класс мог использоваться в других модулях, он определяется с ключевым словом export.

@Component

Декоратор @Component говорит что класс ниже это Angular компонента

TypeScript

@Component({
     selector: 'my-app',
     template: `<label>Введите имя:</label>
          <input [(ngModel)]="name" placeholder="name">
          <h1>Добро пожаловать {{name}}!</h1>`
})
export class AppComponent {
     name: "";
}

Декоратор @Component добавляет в класс AppComponent свойства: selector, template, ...

подробнее о декораторе класса в TypeScript ...

Декоратор @Component находится в библиотеке @angular/core поэтому мы импортируем

TypeScript

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

свойство template

Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.

Шаблон может быть однострочным или многострочным. Если шаблон многострочный, то он заключается в косые кавычки (`), которые стоит отличать от стандартных ординарных кавычек (').

Каждый компонент должен иметь один шаблон.

свойство templateUrl

Можно вынести шаблон во внешний файл с разметкой html, а для его подключения использовать свойство templateUrl.

TypeScript

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

@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }

свойство selector

TypeScript

selector: 'my-app'
template: `<label>Введите имя:</label>
<input [(ngModel)]="name" placeholder="name">
<h1>Добро пожаловать {{name}}!</h1>`

Соответственно html-страница с <my-app></my-app> будет заменена на template

Html

<label>Введите имя:</label>
<input [(ngModel)]="name" placeholder="name">
<h1>Добро пожаловать {{name}}!</h1>

Пример:

Html

<!DOCTYPE html>
<html>

<head>
     <meta charset="utf-8" />
     <title>Hello Angular 10</title>
</head>

<body>
     ~~<my-app></my-app>~~
     <label>Введите имя:</label>
     <input [(ngModel)]="name" placeholder="name">
     <h1>Добро пожаловать {{name}}!</h1>
</body>

</html>

свойство styles

Для установки стилей в компоненте определено свойство styles:

TypeScript

@Component({
     selector: 'my-app',
     template: `<h1>Hello Angular 10</h1>
          <p>Angular 10 представляет модульную архитектуру приложения</p>`,
     styles: [`
          h1, h2{color:navy;}
          p{font-size:13px; font-family:Verdana;}
     `]
})
export class AppComponent { }

Селектор :host
Селектор :host ссылается на элемент, в котором хостится компонент. То есть в данном случае это элемент <my-app></my-app>. И селектор :host как раз позволяет применить стили к этому элементу

TypeScript

@Component({
     styles: [`
     h1, h2{color:navy;}
     p{font-size:13px;}
     :host {
          font-family: Verdana;
          color: #555;
     }
`]

свойство styleUrls

styleUrls позволяет указать набор файлов css, которые применяются для стилизации. В данном случае предполагается, что файл css располагается в проекте.

TypeScript

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

@Component({
     selector: 'my-app',
     template: `<h1>Hello Angular 10</h1>`,
     styleUrls: ['./app.component.css']
})
export class AppComponent { }

← Previous topic
Модули в Angular

Next topic →
Привязка данных в Angular