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

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

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

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

Код TypeScript:

  класс экспорта  HeroListComponent реализует OnInit {heroes: Hero []; selectedHero: Hero; конструктор (частная служба: HeroService) {} ngOnInit () {this.heroes = this.service.getHeroes ();} selectHero (hero: Hero) {this.SelectedHero  = герой;  }}  

Живая демонстрация:

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

См. Pen HeroListComponent от w3resource (@ w3resource) на CodePen.

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

Метаданные компонента

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

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

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

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

Код TypeScript:

  @Component ({selector: 'app-hero-list', templateUrl: './hero-list.component.html', provider: [HeroService]}) класс экспорта HeroListComponent реализует OnInit {/*.  .. */}  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и не может есть какой-либо вывод

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML-код:

  

Список героев

Выберите героя из списка

    {{герой. name}}

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода

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

Этот шаблон использует типичные элементы HTML, такие как

и

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

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

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

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

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

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

HTML-код:

  
  • {{hero.name}}
  • Живая демонстрация:

    Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никакого вывода

    См. раздел Pen Illustrating Data binding с использованием шаблона HeroListComponent от w3resource (@ w3resource) на CodePen.

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

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

        

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

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

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

    Каналы

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

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

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

      `{{interpolated_value |  pipe_name}} ` 

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

    HTML-код:

       Сегодня {{сегодня |  date}}  

    Дата: {{сегодня | date: 'fullDate'}}

    Сейчас {{сегодня | date: 'shortTime'}}

    Живая демонстрация:

    Это просто код фрагмент, объясняющий конкретную концепцию и не имеющий выходных данных

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

    Директивы

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

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

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

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

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

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

    HTML-код:

      
  • Живая демонстрация:

    Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода

    См. раздел Pen Illustrating Angular Directives от w3resource (@ w3resource) на CodePen.

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

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

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

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

      ``  

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

    Оцените статью
    nanomode.ru
    Добавить комментарий