Введение в компоненты

Последнее обновление 17 июля 2019 08:10:53 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Компонент контролирует участок экрана, называемый представлением . Например, в представлении может быть сделан компонент для управления заголовком, навигационной ссылкой, боковой панелью, содержимым веб-страницы и нижним колонтитулом.

Вы определяете логику приложения компонента - что он делает для поддержки представления - внутри класса. Класс взаимодействует с представлением через API свойств и методов.

Например, у HeroListComponent есть свойство heroes, которое содержит массив героев. Его метод `selectHero ()` устанавливает свойство `selectedHero`, когда пользователь щелкает, чтобы выбрать героя из этого списка. Компонент получает героев из службы, которая является свойством параметра TypeScript конструктора. Услуга предоставляется компоненту через систему внедрения зависимостей.

Код TypeScript:

export class HeroListComponent implements OnInit {
  heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
  this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.SelectedHero = hero; }
}

Демонстрация в реальном времени:

См. Перо HeroListComponent от w3resource ( @ w3resource ) в CodePen .

Angular создает, обновляет и уничтожает компоненты при перемещении пользователя по приложению. Ваше приложение может действовать в каждый момент этого жизненного цикла с помощью дополнительных хуков жизненного цикла, таких как ngOnInit ().

Компоненты метаданных

В Angular декоратор @Component идентифицирует класс, находящийся непосредственно под ним, как класс компонента и указывает его метаданные. В приведенном ниже примере кода вы можете видеть, что HeroListComponent - это просто класс без каких-либо специальных угловых обозначений или синтаксиса. Это не компонент, пока вы не пометите его как один с помощью декоратора @Component.

Метаданные для компонента сообщают Angular, где взять основные строительные блоки, необходимые для создания и представления компонента и его представления. В частности, он связывает шаблон с компонентом, либо непосредственно со встроенным кодом, либо по ссылке. Вместе компонент и его шаблон описывают представление.

В дополнение к содержанию или указанию на шаблон метаданные @Component настраивают, например, как можно ссылаться на компонент в HTML и какие сервисы ему требуются.

Вот пример основных метаданных для HeroListComponent.

Код TypeScript:

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
  /* . . . */
}

Демонстрация в реальном времени:

См. Перо Основные метаданные для HeroListComponent от w3resource ( @ w3resource ) в CodePen .

В этом примере показаны некоторые из наиболее полезных параметров конфигурации @Component:

В Angular перед отображением представления оцениваются директивы и синтаксис привязки в шаблоне, а HTML и DOM модифицируются в соответствии с данными и логикой программы.

селектор: селектор CSS, который указывает Angular создавать и вставлять экземпляр этого компонента, где бы он ни находил соответствующий тег в шаблоне HTML. Например, если HTML-код приложения содержит <app-hero-list> </ app-hero-list>, то Angular вставляет экземпляр представления HeroListComponent между этими тегами.

templateUrl: относительный к модулю адрес HTML-шаблона этого компонента. Кроме того, вы можете указать встроенный шаблон HTML в качестве значения свойства шаблона. Этот шаблон определяет представление узла компонента.

провайдеры: массив провайдеров для услуг, которые требуются компоненту. В этом примере это говорит Angular, как предоставить экземпляр HeroService, который конструктор компонента использует для отображения списка героев.

Шаблоны и представления

Мы определяем вид компонента с его сопутствующим шаблоном. Шаблон - это форма HTML, которая сообщает Angular, как визуализировать компонент.

Представления обычно располагаются иерархически, что позволяет вам изменять или показывать и скрывать целые разделы или страницы пользовательского интерфейса как единое целое. Шаблон, непосредственно связанный с компонентом, определяет представление узла этого компонента. Компонент также может определять иерархию представлений , которая содержит встроенные представления , размещенные другими компонентами.

Иерархия представлений может включать представления от компонентов в одном и том же модуле NgModule, но она также может (и часто включает) представления от компонентов, определенных в разных модулях NgModule.

Синтаксис шаблона

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

Например, вот шаблон для HeroListComponent Учебника.

HTML-код:

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

Демонстрация в реальном времени:

См. Pen Пример шаблона для HeroListComponent от w3resource ( @ w3resource ) на CodePen .

Этот шаблон использует типичные элементы HTML, такие как <h2> и <p>, а также элементы углового шаблона-синтаксиса, * ngFor, {{hero.name}}, (click), [hero] и , Элементы шаблона-синтаксиса сообщают Angular, как визуализировать HTML-код на экране, используя программную логику и данные.

Директива * ngFor указывает Angular перебирать список.
{{hero.name}}, (click) и [hero] привязывают данные программы к DOM и от него, реагируя на ввод пользователя.
Тег <app-hero-detail> в этом примере является элементом, представляющим новый компонент HeroDetailComponent. HeroDetailComponent (хотя и не показан в фрагменте кода) определяет детальное представление HeroListComponent с подробной информацией о героях. Обратите внимание на то, как такие пользовательские компоненты легко сочетаются с нативным HTML в одних и тех же макетах.

Привязка данных

Без каркаса вы были бы ответственны за передачу значений данных в элементы управления HTML и превращение пользовательских ответов в действия и обновления значений. Написание такой логики push и pull вручную утомительно, подвержено ошибкам и является кошмаром для чтения, что может засвидетельствовать любой опытный программист jQuery.

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

Этот пример из шаблона HeroListComponent использует три из этих форм.

HTML-код:

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

Демонстрация в реальном времени:

См. Перо, иллюстрирующее привязку данных с использованием шаблона HeroListComponent от w3resource ( @ w3resource ) на CodePen .

Интерполяция {{hero.name}} отображает значение свойства hero.name компонента в элементе <li>.
Привязка свойства [hero] передает значение selectedHero из родительского HeroListComponent в свойство hero дочернего HeroDetailComponent.
Привязка события (click) вызывает метод selectHero компонента, когда пользователь щелкает имя героя.

Двусторонняя привязка данных (используется в основном в формах на основе шаблонов) объединяет привязку свойств и событий в одной записи. Вот пример из шаблона HeroDetailComponent, который использует двустороннее связывание данных с директивой ngModel.

<input [(ngModel)]="hero.name">

При двусторонней привязке значение свойства данных поступает в поле ввода из компонента, как и при привязке свойства. Изменения пользователя также возвращаются к компоненту, сбрасывая свойство до последнего значения, как при привязке событий.

Angular обрабатывает все привязки данных один раз для каждого цикла событий JavaScript, начиная с корня дерева компонентов приложения и заканчивая всеми дочерними компонентами.

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

трубы

Угловые каналы позволяют объявлять преобразования отображаемого значения в шаблоне HTML. Класс с декоратором @Pipe определяет функцию, которая преобразует входные значения в выходные значения для отображения в представлении.

Angular определяет различные каналы, такие как дата и валюта. Вы также можете определить нашу собственную новую трубу.

Чтобы указать преобразование значения в шаблоне HTML, используйте оператор канала (|).

`{{interpolated_value | pipe_name}}`

Вы можете связать конвейеры, отправив выходные данные одной функции конвейера для преобразования другой функцией конвейера. Канал также может принимать аргументы, управляющие тем, как он выполняет свое преобразование. Например, вы можете передать желаемый формат в конвейер даты.

HTML-код:


 <p>Today is {{today | date}}</p>
<p>The date is {{today | date:'fullDate'}}</p>
 
 <p>The time is {{today | date:'shortTime'}}</p>

Демонстрация в реальном времени:

См. Перо, иллюстрирующее использование каналов w3resource ( @ w3resource ) в CodePen .

Директивы

Угловые шаблоны являются динамическими. Когда Angular отображает их, он преобразует DOM в соответствии с инструкциями, данными директивами. Директива - это класс с декоратором @Directive ().

Технически компонент является директивой. Однако компоненты настолько отличительны и являются центральными для приложений Angular, что Angular определяет декоратор @Component (), который расширяет декоратор @Directive () функциями, ориентированными на шаблоны.

В дополнение к компонентам, есть два других вида директив: структурные и атрибутные. Angular определяет несколько директив обоих типов, и вы можете определить свои собственные, используя декоратор @Directive ().

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

Структурные директивы

Структурные директивы изменяют макет, добавляя, удаляя и заменяя элементы в DOM. В шаблоне примера используются две встроенные структурные директивы для добавления логики приложения в способ визуализации представления.

HTML-код:

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

Демонстрация в реальном времени:

См. Перо, иллюстрирующее угловые директивы от w3resource ( @ w3resource ) на CodePen .

* ngFor является итеративным; это говорит Angular об исключении одного <li> на героя из списка героев.
* ngIf является условным; он включает компонент HeroDetail, только если выбранный герой существует.

Директивы атрибутов

Директивы атрибутов изменяют внешний вид или поведение существующего элемента. В шаблонах они выглядят как обычные атрибуты HTML, отсюда и название.

Директива ngModel, которая реализует двустороннюю привязку данных, является примером директивы атрибута. ngModel изменяет поведение существующего элемента (обычно <input>), устанавливая его свойство отображаемого значения и реагируя на события изменения.

`<input [(ngModel)] ="hero.name">`

Angular имеет больше предопределенных директив, которые либо изменяют структуру макета (например, ngSwitch), либо изменяют аспекты элементов и компонентов DOM (например, ngStyle и ngClass).

Предыдущая: Введение в сервисы и внедрение зависимостей
Далее: пользовательский ввод