angular:angular2:component:sozdanie_novogo_komponenta []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
=====Создание нового компонента=====

**Компонент Angular** - обособленная часть интерфейса со своей логикой, HTML-шаблоном и стилями, представленная в виде класса, объявлению которого предшествует декоратор ``@Component().``

====Создать новый компонент с помощью ng generate====

<code powershell>
ng generate component home
</code>

===сокращенная запись===
<code javascript>
ng g c home
</code>

===создание компонента без тестов===
<code javascript>
ng generate component --spec=false
</code>

====примера создания компонента Angula====
Начнем сразу с примера создания компонента Angular.\\

home.component.ts
<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
</code> 

Для использования созданного компонента в приложении сначала его необходимо указать в модуле, в пределах которого он определен, в свойстве declarations.
\\
app.module.ts
<code javascript>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</code>

Инициализация компонента осуществляется через использование значения свойства selector в качестве элемента в нужном месте шаблона.\\
app.component.html
<code javascript>
    <div>
      <app-home></app-home>
    </div>
</code>

Свойства класса компонента могут использоваться для отображения данных в шаблоне. Для этого используется механизм интерполяции. А вызов методов может осуществляться при возникновении событий.

====Конфигурация компонента====

Параметры компонента задаются с помощью передаваемого декоратору конфигурационного объекта следующей структуры:

  * **selector** - уникальный для каждого компонента CSS-селектор, с помощью которого компонент инициализируется в шаблоне;
  * **template** - визуальная часть компонента, представленная HTML-разметкой в виде строки;
  * **templateUrl** - URL-адрес файла, содержащего HTML-разметку;
  * **styles** - стили, распространяемые только на HTML текущего компонента;
  * **styleUrls** - массив URL-адресов файлов стилей;
  * **inputs** - определяет массив входных свойств;
  * **outputs** - задает массив выходных свойств;
  * **animations** - описывает анимации компонента;
  * **encapsulation** - определяет с помощью перечисления ViewEncapsulation пределы распространения стилей;
  * **changeDetection** - устаналивает режим работы механизма отслеживания изменений;
  * **providers** - задает массив локальных в пределах компонента Angular Providers;
  * **viewProviders** - определяет Angular Providers, которые доступны не только текущему компоненту, но и всем его дочерним представлениям;
  * **interpolation** - переопределяет открывающий и закрывающие символы интерполяции;
  * **preserveWhitespaces** - логическое значение, если true - сохраняет в шаблоне все лишние символы пробела, в противном случае удаляет их (по умолчанию false).; 

<note>
Пары свойств ``template/templateUrl`` и ``styles/styleUrls`` вляются взаимоисключающими. Предпочтительными для использования при разработке являются ``templateUrl`` и styleUrls.
</note> 

При переопределении символов интерполяции свойству interpolation передается массив с двумя элементами, первый из которых задает открывающий символ, а второй - закрывающий символ.

<code javascript>
 @Component({
      ...
      interpolation: ['!!', '!!']
    })
</code>

====selector====
//вызов компонента с помощью тега//
<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})
</code>

<code javascript>
<app-car></app-car>
</code>
\\
//вызов с помощью аттрибута//
<code javascript> 
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: '[app-car]',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})
</code>

<code javascript> 
<div app-car></div>
</code>
\\
//вызов в классе//
<code javascript> 
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: '.app-car',
  template: `
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  ` 
})
</code>
<code javascript>
<div class='app-car'><div>
</code>


====template====

С помощью свойства template. Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.
<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car',
  template: `
    <h2>Single Car</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  `,
})
export class CarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
</code>

====templateUrl====

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

<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car',
  templateUrl: './car.component.html',

})
export class CarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
</code>

====styles====
Стилизация компонента может производиться как с помощью установки стилей в самом компоненте, так и с помощью подключения внешних css-файлов.

Для установки стилей в директиве @Component определено свойство styles:
<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car',
  template: `
    <h2>Single Car</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nesciunt.</p>
  `,
  // styleUrls: ['./car.component.css']
  styles: [`
    h2 {
      color: aqua;
    }
  `] 
})
export class CarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

</code>

====Инкапсуляция стилей====

Под инкапсуляцией стилей компонента понимается определение пределов распространения его стилей на другие шаблоны.\\
\\
Правило инкапсуляции задается с помощью перечисления ``ViewEncapsulation``, который входит в состав модуля \\
\\
''@angular/core'' и имеет следующие значения:

  * **ViewEncapsulation.Emulated** - используется по умолчанию и указывает, что стили действуют только в пределах текущего компонента;
  * **ViewEncapsulation.None** - объявленные для компонента стили распространяются на все приложение без ограничений;
  * **ViewEncapsulation.ShadowDom** - создает для компонента элемент ShadowRoot и инкапсулирует стили в нем.

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

<code javacript>
   import {ViewEncapsulation} from '@angular/core';
    
    @Component({
      ...
      encapsulation: ViewEncapsulation.None
    })
</code>
====Геттеры и сеттеры====

Геттерами и сеттерами называются методы Angular компонента, которые используются для модификации значений его свойств.\\
\\
//Getter// вызывается в момент обращения к свойству (в шаблоне или в других методах классах), setter - в момент присвоения ему значения, обычно это свойства с декоратором ''@Input()''.

<code javascript>
@Input() _name: string = null;

get name(): string { return this._name || 'Unknown'; }
</code> 

Запись означает, что при обращении к свойству с именем name будет вызван одноименный метод с ключевым словом get.\\
\\
Setter создается с помощью set. Он не должен возвращать значений и обязательно принимает в качестве единственного аргумента исходное значение.

<code javascript>
    @Component({
      selector: 'contacts-list',
      template: `<contacts-item [name] = " 'Peter' "></contacts-item>`
    })
    
    export class ContactsListComponent {
      contactPerson: string;
    }
</code>

<code javascript>
    @Component({
      selector: 'contacts-item',
      template: `<p>{{name}}</p>`
    })
    
    export class ContactsItemComponent {
      _name: string = null;
    
      @Input() set name(value: string) { this._name = value + '*'; }
      
      get name(): string { return this._name || 'Unknown'; }
    }
</code>

В компоненте ''ContactsItemComponent'' определено строковое свойство ''_name'', которое участвует в формировании name.

<note>
Свойства, определенные в Angular компоненте с помощью сеттеров и геттеров, не должны дублироваться в "обычных" свойствах, поэтому в примере выше используется название с нижним подчеркиванием.
</note>

В ''ContactsListComponent'' задается значение name компонента ''ContactsItemComponent''. Именно в этот момент вызывается метод ''set()'' и устанавливает значение в "Peter*".\\
\\

В самом компоненте после интерполяции вызывается метод ''get()'', который возвращает "Unknown", если _name равно null.\\
\\

То есть если бы в ContactsListComponent шаблон был <contacts-item></contacts-item>, то значением name было бы "Unknown".
Инструменты пользователя

Инструменты сайта

Инструменты страницы
