Создание компонентов в Angular
В angular компонент определяет, что отображается в DOM. Модель DOM обычно состоит из множества различных компонентов, связанных вместе и оформленных для отображения пользователю. В отличие от React, где логика вашего компонента и html находятся в одном файле, в angular каждый из элементов компонента является отдельным. Это означает, что у нас есть 3 или более файлов для каждого компонента. Сегодня мы обсудим только файл машинописного текста, файл html и файл css. Обладая этими знаниями, вы будете знать, как создавать базовые компоненты angular, которые можно будет просматривать в DOM.
Прежде чем мы погрузимся в создание компонента, я просто хочу остановиться на некоторых соглашениях об именах. Чтобы создать новый компонент, мы создадим новую папку в файле нашего приложения, в которой будут размещены все файлы наших компонентов. Эта папка должна быть названа в честь вашего компонента. В этой папке файлы должны называться следующим образом: componentName .component. fileType.
Шаг 1: файл Component Typescript
В файле машинописного текста будет размещена информация о вашем компоненте. Это будет файл с соглашением об именах componentName.component.ts. В верхней части файла нам нужно будет импортировать компонент из angular / core.
Это позволит нам использовать декоратор компонентов, предоставленный нам машинописным текстом. Это позволяет рассматривать класс ниже как компонент. Компонент содержит метаданные, которые дают некоторое руководство по использованию компонента. Все компоненты должны иметь шаблон. Шаблон - это HTML-код, связанный с компонентом. Это можно сделать либо в строке, либо указав на файл html, что мы и сделаем в этом руководстве. Помимо этого существует множество других метаданных, которые можно использовать в компоненте для создания любых необходимых ассоциаций. Мы будем добавлять селектор. Это позволит нам связать компонент как конкретный тег html. Хотя есть несколько способов реализовать селектор, мы будем использовать селектор как тег html. Мы также добавим метаданные styleUrls, чтобы связать соответствующий файл css с компонентом. StyleUrls должен быть установлен как массив маршрутов к таблицам стилей css; маршруты должны быть строками. Это массив, потому что при необходимости он может указывать на множество различных таблиц стилей.
Сразу после компонента у нас должен быть наш экспортированный класс, который будет преобразован в компонент и в конечном итоге будет содержать любую необходимую логику, необходимую для компонента.
И это все, что мы будем размещать в нашем файле машинописного текста для целей этого руководства.
Шаг 2: компонентный HTML-файл
HTML-файл должен содержать любой HTML-код, который вы хотите отобразить в DOM. Для нашего урока мы сделаем тег h1, который скажет: «Мы эксперты по компонентам Angular!».
Файл html очень прост. Все, что мы помещаем в этот файл, будет отображаться в DOM, пока мы вызываем селектор в основном компоненте, в нашем случае компоненте приложения.
Шаг 3: CSS-файл компонента
Этот файл будет содержать любые стили CSS, которые вы хотите применить к компоненту. Это, конечно, работает так же, как и любой другой лист для укладки. Вы должны либо вызвать определенный html, класс, идентификатор и т. Д., Чтобы дополнительно стилизовать указанный элемент. Мы просто изменим цвет нашего тега h1 на синий.
Заключительные шаги
Наконец, мы свяжем все вместе, чтобы этот компонент можно было отрендерить. В angular, если вы не импортируете компонент в файл app.module.ts и не добавите его как объявление в ngModule, angular и typescript не будут знать, что файлы существуют. Поэтому мы импортируем наш тестовый компонент в файл app.module.ts и добавим его в качестве объявления. (Боковое примечание: нам не нужно указывать тип файла при предоставлении маршрута файла для импорта)
Теперь мы можем вызвать наш тег app-test в файле app.component.html для рендеринга нашего html-кода из тестового компонента.
И вот оно! Вы только что отрендерили свой первый угловой компонент в DOM. Конечно, это всего лишь начальная точка. Компоненты могут стать более сложными, поскольку мы начинаем добавлять больше метаданных к нашим компонентам и добавлять различные функции в наше приложение. Я рекомендую вам поэкспериментировать с этим базовым руководством и изучить дополнительные функции, которые можно добавить в компоненты с помощью angular.
