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

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

Использование компонентов в Angular

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

<приложение-новый-компонент></app-new-component>

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

instagram viewer
приложение-routing.module.ts файл.

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

Как создать компонент

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

  1. Создать новый Угловое приложение с использованием новый или открыть существующий.
  2. Откройте командную строку или терминал. В качестве альтернативы, если ваше приложение Angular открыто в IDE, например Visual Studio Code, вы можете использовать встроенный терминал.
  3. В терминале перейдите к расположению корневой папки проекта. Например:
    CD C:\Пользователи\Шарл\Рабочий стол\Угловое приложение
  4. Запустите нг генерировать компонент команда, за которой следует имя нового компонента:
    ng сгенерировать компонент пользовательского интерфейса
  5. Новый компонент будет создан в новой папке внутри источник/приложение каталог.

Как добавить контент в компонент Angular

Angular создает каждый компонент с помощью файла HTML, CSS, TypeScript и спецификации тестирования.

  • HTML-файл хранит HTML-контент компонента.
  • CSS-файл сохраняет стиль компонента.
  • Файл спецификации тестирования (spec.ts) хранит любые модульные тесты для компонента.
  • TypeScript-файл хранит логику и функциональность, определяющие компонент.

Добавьте некоторый контент в пользовательский компонент пользовательского интерфейса.

  1. Открытым src/app/ui-card/ui-card.component.htmlи обновите HTML-код компонента. Убедитесь, что у вас есть изображение с таким же именем в папке с именем источник/активы/изображения в вашем приложении Angular. Заменить содержимое ui-card.component.html со следующим:
    <раздел класс ="открытка">
    <источник изображения ="./активы/изображения/голубые горы.jpg" альт="Аватар">
    <раздел класс ="контейнер">
    <h4 класс="заглавие"> Голубые горы </h4>
    <п> Новый Южный Уэльс, Австралия </п>
    </div>
    </div>
  2. Открытым пользовательский интерфейс-card.component.cssи добавьте содержимое CSS в компонент:
    .открытка {
    коробка-тень: 0 4пикс. 8пикс. 0 RGBA(0, 0, 0, 0.2);
    ширина: 400пикс.;
    набивка: 8пикс.;
    поле: 24пикс.;
    фоновый цвет: белый дым;
    семейство шрифтов: без засечек;
    }
    .открыткаизображение {
    Максимальная ширина: 400пикс.;
    }
    

    .заглавие {
    обивка: 16пикс.;
    }
    .контейнер {
    набивка: 2пикс. 16пикс.;
    }
  3. ui-card.component.ts файл уже содержит класс для нового компонента, в который можно добавить новые функции, логику и функциональность. Это должно выглядеть так:
    экспортучебный класс UiCardComponent реализует OnInit {
    конструктор() { }
     нгонинит(): пустота {
    // Добавьте сюда немного логики кода
     }
    // Или добавьте свою логику и функциональность в новые функции
    }

Как использовать компонент в HTML другого компонента

Внутри ui-card.component.ts, есть три атрибута: selector, templateUrl и styleUrl. templateUrl относится к HTML-коду компонента (и, следовательно, к HTML-файлу). Атрибут styleUrls относится к CSS компонента и ссылается на файл CSS.

@Составная часть({
 селектор: 'app-ui-card',
 Url-шаблона: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

Когда вы используете компонент карты пользовательского интерфейса в другом компоненте, вы будете использовать имя селектора «app-ui-card».

  1. Сначала добавьте контент на свою веб-страницу. Открытым источник/приложение/приложение.компонент.html и добавьте панель навигации:
    <раздел класс ="навигационная панель-заголовок">
    <класс ="навигационное название"><б> Веб-навигационная панель </ б></ а>
    </div>
  2. Добавьте стиль к вашей панели навигации в источник/приложение/приложение.компонент.css:
    .navbar-заголовок {
    фоновый цвет: #07393C;
    набивка: 30пикс. 50пикс.;
    отображать: сгибаться;
    выравнивание элементов: центр;
    семейство шрифтов: без засечек;
    }
    .nav-название {
    украшение текста: никто;
    цвет: белый;
    размер шрифта: 16пт;
    }
  3. Под панелью навигации в app.component.html, добавьте новую карточку пользовательского интерфейса. Используйте имя селектора «app-ui-card» в качестве тега HTML:
    <приложение-UI-карта></app-ui-card>
  4. Вы также можете повторно использовать компонент, включив тег несколько раз. Для этого замените указанную выше строку на использование нескольких HTML-тегов app-ui-card:
    <стиль div="дисплей: гибкий">
    <приложение-UI-карта></app-ui-card>
    <приложение-UI-карта></app-ui-card>
    <приложение-UI-карта></app-ui-card>
    </div>
  5. Запустите приложение Angular из терминала, используя нг служить команду и откройте свой веб-сайт в веб-браузере.

Как передать входные параметры в компонент

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

  1. Добавлять Вход к списку импорта в верхней части ui-card.component.ts:
    импорт {Компонент, ввод, OnInit} из '@угловой/core';
  2. Затем добавьте две входные переменные внутри UICardComponent учебный класс. Это позволит вам изменить название местоположения и изображение, которое отображается на карте. Заполните нгонинит как показано, чтобы создать путь к изображению или использовать значение по умолчанию:
    экспортучебный класс UiCardComponent реализует OnInit {
    @Вход() название местоположения: нить;
    @Вход() имя_изображения: нить;
    конструктор() { }
     нгонинит(): пустота {
    если (это.imageName) {
    это.imageName = "./assets/images/" + это.ИмяИзображения;
     } еще {
    это.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. В ui-card.component.html, измените жестко запрограммированное значение «Голубые горы» в заголовке 4, чтобы вместо него использовалась входная переменная «locationName». Также измените жестко закодированный источник атрибут в теге изображения, чтобы использовать входную переменную "imageName":
    <раздел класс ="открытка">
    <источник изображения ="{{имя_изображения}}" альт="Аватар">
    <раздел класс ="контейнер">
    <h4 класс="заглавие">{{название местоположения? название местоположения: 'Голубые горы'}}</h4>
    <п>Новый Южный Уэльс, Австралия</п>
    </div>
    </div>
  4. В app.component.html, измените теги «app-ui-card», чтобы включить входные данные «locationName» и «imageName». Для каждого элемента карты пользовательского интерфейса введите другое значение. Убедитесь, что файлы изображений существуют в папке assets/images вашего приложения Angular.
    <стиль div="дисплей: гибкий">
    <app-ui-карта [имя_местоположения] ="'Голубые горы'" [имя изображения]="'голубые горы.jpg'"></app-ui-card>
    <app-ui-карта [имя_местоположения] ="'Сидней'" [имя изображения]="'Сидней.jpg'"></app-ui-card>
    <app-ui-карта [имя_местоположения] ="'Ньюкасл'" [имя изображения]="'Ньюкасл.jpg'"></app-ui-card>
    </div>
  5. Запустите приложение Angular из терминала, используя нг служить команду и откройте свой веб-сайт в веб-браузере.

На этом этапе вы можете увидеть ошибку об отсутствии инициализатора у этих свойств. Если да, просто добавьте или установите «СтрогаяИнициализацияПроперти»: ложь в твоей tsconfig.json.

Как выполнить маршрут к новому компоненту

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

  1. Открытым приложение-routing.module.ts. Импортируйте компонент карты пользовательского интерфейса в верхней части файла:
    импорт {UiCardComponent} из './ui-card/ui-card.component';
  2. Добавьте путь маршрутизации в массив маршрутов:
    константа маршруты: Маршруты = [
    //... Любые другие маршруты, которые могут вам понадобиться...
     {путь: 'uicard', компонент: UiCardComponent},
    ]
  3. Заменить все текущее содержимое в app.component.html включать только панель навигации и HTML-тег router-outlet. Router-outlet позволяет маршрутизировать между страницами. Добавьте гиперссылку на панель навигации с атрибутом href, соответствующим пути в массиве маршрутов:
    <раздел класс ="навигационная панель-заголовок">
    <класс ="навигационное название"><б> Веб-навигационная панель </ б></ а>
    <класс ="навигационная ссылка" ссылка="/uicard"><б> Карта пользовательского интерфейса </ б></ а>
    </div>
    <роутер-розетка></router-outlet>
  4. Добавьте стиль к новой ссылке карты пользовательского интерфейса, в app.component.css:
    .nav-ссылка {
    украшение текста: никто;
    цвет: #4b6569;
    размер шрифта: 14пт;
    поле слева: 60пикс.;
    вес шрифта: более легкий;
    }
  5. Запустите приложение Angular из терминала, используя нг служить команду и откройте свой веб-сайт в веб-браузере. Ссылка появится в панели навигации на веб-странице.
  6. Обратите внимание на URL-адрес в веб-браузере. По умолчанию обычно http://localhost: 4200/. Когда вы нажимаете на ссылку карты пользовательского интерфейса, страница перенаправляется на http://localhost: 4200/карта, и появится карточка пользовательского интерфейса.

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

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

Вы также можете использовать входные переменные для передачи данных между разными экземплярами компонента. И вы можете перейти к компоненту, используя URL-адреса.

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