меню

Компоненты ключевая особенность Angular. Приложение строится из компонентов.

Создание компонента

В директории app создать папку нового компонента и файл (должен содержать .component в имени), например: app/server/server.component.ts

Файл должен наследовать класс ServerComponent и содержать декоратор:

 
import { Component } from '@angular/core';
@Component({
  selector : 'app-server',
  templateUrl : './server.component.html'
})
export class ServerComponent {
}
  

@Component() - это декоратор компонента. Он отмечает, что класс является компонентом angular и содержит мета настройки. В файл app.modules.ts нужно указать новый класс:

  
import { ServerComponent } from './server/server.component'; // <- импортируем новый класс
//...
@NgModule({
declarations: [
  AppComponent,
  ServerComponent  // <- добавили в declarations
],
  

@NgModule() - это декоратор модуля. Он может содержать следующие ключи:

  • declarations — компоненты приложения. Сообщает Ангулару какие компоненты принадлежат данному модулю.
  • imports — импортируемые модули. Здесь содержатся модули без которых данный модуль не может работать.
  • providers — сервис провайдеры. Список сервисов, которые будут доступны во всем приложении.
  • bootstrap — корневой компонент, который Ангулар создает и вставляет в index.html главной страницы.

Модули используются для организации приложения и расширения возможностей из подключаемых библиотек.

Шаблон

Создадим шаблон компонента app/server/server.component.html

Создадим демо данные в шаблоне:

 
<h3>I'am server component</h3>
 

Теперь можно подключить компонент в шаблоне приложения, в файле app.component.html:

 
<app-server></app-server>
 

Создание компонента в Angular CLI и вложенные компоненты

Синтаксис:

ng generate component #name#

или сокращенный вариант: ng g c #name#

опции (не создавать файл тестов): ng g c recipes --spec false

создать компонент в определенной папке: ng g c recipes/recipe-list

Пример использования

Запустим команды: сперва создадим компонент ng g c servers, затем ng g c server

После выполнения данной команды сгенерируется компонент servers и server.

Теперь в шаблоне приложения app.component.html подключим компонент servers:

  
<h3>I'am in the AppComponent!
<hr>
<app-servers></app-servers>
 

А в шаблоне компонента servers app\servers\servers.component.html подключим 2 компонента server:

 
<app-server></app-server>
<app-server></app-server>
  

Компоненты могут быть вложены друг в друга. Это помогает создать удобную структуру проекта:

Вложенные компоненты

Возможно, вам будет интересно

Компонент и модель

Angilar создание обычных и вложенных компонентов через CLI. Описание модели.

Формы. Реактивный подход.

Работа с формами. Реактивный подход (Reactive).

Binding свойств директив

Привязка входных и вторичных свойств директивы атрибута в Angular

События

Рассмотрим события в Angular. Event Binding. Передача и использование данных с помощью event Binding

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту