Как использовать декоратор вывода в Angular

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

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

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

Как добавить декоратор вывода в дочерний компонент

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

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

1. Создать новый Угловое приложение. По умолчанию «приложение» — это имя корневого компонента. Этот компонент включает в себя три основных файла: «app.component.html», «app.component.css» и «app.component.ts».
2. В этом примере компонент «приложение» будет действовать как родительский компонент. Замените все содержимое в «app.component.html» следующим:

   <дивсорт="родительский компонент">
   <h1> Это родительский компонент h1>
   див>

3. Добавьте стиль к родительскому компоненту приложения в «app.component.css»:

   .parent-компонент {
   семейство шрифтов: Ариал, Гельветика, без засечек;
   фоновый цвет: светлокоралловый;
   набивка: 20пикс.
   }

4. Используйте команду «ng generate component», чтобы создать новый компонент Angular называется «компонентом данных». В этом примере «компонент данных» будет представлять дочерний компонент.

   ng g c компонент данных

5. Добавьте содержимое в дочерний компонент в «data-component.component.html». Замените текущий контент, чтобы добавить новую кнопку. Привяжите кнопку к функции, которая будет запускаться, когда пользователь нажимает на нее:

   <дивсорт="детский компонент">
   <п> Это дочерний компонент п>
   <кнопка (нажмите)="наКнопку()">Нажми на менякнопка>
   див>

6. Добавьте стиль к дочернему компоненту в «data-component.component.css»:

   .child-компонент {
   семейство шрифтов: Ариал, Гельветика, без засечек;
   фоновый цвет: светло-синий;
   допуск: 20пикс.;
   набивка: 20пикс.
   }

7. Добавьте функцию onButtonClick() в файл TypeScript для компонента в «data-component.component.ts»:

   onButtonClick () {
   }

8. Все еще внутри файла TypeScript добавьте «Output» и «EventEmitter» в список импорта:

   Импортировать {Компонент, Выход, EventEmitter, OnInit} от'@угловой/ядро';

9. Внутри класса DataComponentComponent объявите выходную переменную для компонента с именем «buttonWasClicked». Это будет EventEmitter. EventEmitter — это встроенный класс, который позволяет вам информировать другой компонент, когда происходит событие.

   экспортсорт Компонент ДанныхКомпонент реализует OnInit {
   @Выход() buttonWasClicked = новый Эмиттер событий<пустота>();
   // ...
   }

10. Используйте генератор событий «buttonWasClicked» внутри функции onButtonClick(). Когда пользователь нажимает кнопку, компонент данных отправляет это событие в родительский компонент приложения.

    onButtonClick () {
    этот.buttonWasClicked.emit();
    }

Как прослушивать события в дочернем компоненте из родительского компонента

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

1. Используйте дочерний компонент внутри "app.component.html". Вы можете добавить вывод «buttonWasClicked» в качестве свойства при создании тега HTML. Привяжите событие к новой функции.

   <компонент данных приложения (кнопкаWasClicked)="кнопкаInChildComponentWasClicked()">компонент данных приложения>

2. Внутри «app.component.ts» добавьте новую функцию для обработки события нажатия кнопки, когда оно происходит в дочернем компоненте. Создайте сообщение, когда пользователь нажмет на кнопку.

   сообщение: нить = ""
   buttonInChildComponentWasClicked() {
   этот.сообщение = «Кнопка в дочернем компоненте была нажата»;
   }

3. Отобразить сообщение в «app.component.html»:

   <п>{{сообщение}}п>

4. Введите команду «ng serve» в терминал, чтобы запустить приложение Angular. Откройте его в веб-браузере по адресу localhost: 4200. Родительский и дочерний компоненты используют разные цвета фона, чтобы их было легче различать.
5. Нажать на Нажми на меня кнопка. Дочерний компонент отправит событие родительскому компоненту, который отобразит сообщение.

Как отправить данные из дочернего компонента в родительский компонент

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

1. В «data-component.component.ts» добавьте переменную для хранения списка строк, содержащих некоторые данные.

   списоклюдей: нить[] = ['Джоуи', 'Джон', 'Джеймс'];

2. Измените тип возвращаемого значения генератора событий buttonWasClicked. Измените его с void на string[], чтобы он соответствовал списку строк, которые вы объявили на предыдущем шаге:

   @Выход() buttonWasClicked = новый Эмиттер событий<нить[]>();

3. Измените функцию onButtonClick(). При отправке события родительскому компоненту добавьте данные в качестве аргумента в функцию emit():

   onButtonClick () {
   этот.buttonWasClicked.emit(этот.listOfPeople);
   }

4. В «app.component.html» измените тег «app-data-component». Добавьте «$event» в функцию buttonInChildComponentWasClicked(). Он содержит данные, отправленные из дочернего компонента.

   <компонент данных приложения (кнопкаWasClicked)="кнопкаInChildComponentWasClicked($event)">компонент данных приложения>

5. Обновите функцию в «app.component.ts», чтобы добавить параметр для данных:

   buttonInChildComponentWasClicked (данные от ребенка: нить[]) {
   этот.сообщение = «Кнопка в дочернем компоненте была нажата»;
   }

6. Добавьте новую переменную с именем «данные» для хранения данных, поступающих от дочернего компонента:

   сообщение: нить = ""
   данные: нить[] = []
   buttonInChildComponentWasClicked (данные от ребенка: нить[]) {
   этот.сообщение = «Кнопка в дочернем компоненте была нажата»;
   этот.данные = данные от ребенка;
   }

7. Отобразите данные на HTML-странице:

   <п>{{data.join(', ')}}п>

8. Введите команду «ng serve» в терминал, чтобы запустить приложение Angular. Откройте его в веб-браузере по адресу localhost: 4200.
9. Нажать на Нажми на меня кнопка. Дочерний компонент будет отправлять данные из дочернего компонента в родительский компонент.

Отправка данных в другие компоненты с помощью декоратора вывода

Есть и другие декораторы, которые вы можете использовать в Angular, такие как декоратор Input или декоратор Component. Вы можете узнать больше о том, как использовать другие декораторы в Angular для упрощения кода.