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

Компонент состоит из

  1. Шаблон: определяет пользовательский интерфейс, который содержит HTML, директивы и привязки данных.
  2. Класс: содержит код, необходимый для шаблона представления. Он содержит свойства и методы.
  3. Декоратор: мы используем компонент декоратора, предоставляемый angular, который добавляет метаданные в класс. Когда мы добавляем декоратор поверх компонента, класс становится компонентом.
  4. По соглашению корневой компонент в Angular называется AppComponent, а имя файла — app.component.ts.
  5. Свойство шаблона в компоненте: если у вас однострочный HTML, вы можете использовать одинарные или двойные кавычки, но если у вас многострочный HTML, вы должны использовать символ обратной кавычки.
  6. СвойствоTemplateUrl: используется, если у вас есть отдельная HTML-страница для вашего компонента, а затем используется это. Когда ваши шаблоны просмотра длиннее 3 строк, используется только HTML-страница.
  7. Свойство Selector: на него ссылается HTML-страница индекса для добавления представления нашего компонента. Селектор используется как директива, где мы хотим вызвать наш компонент.

AppModule

Это корневой модуль, который загружает угловое приложение. В app.module импортируем 2 системных модуля и модуль браузера. В этом браузере модуль используется для всех угловых приложений, которые запускаются внутри браузера. Модуль браузера предоставляет ng-if и ngFor.

  • Импорт: он импортирует модуль браузера, который требуется всем угловым модулям для запуска внутри браузера.
  • Объявления: это массив, который используется для регистрации нового компонента.
  • Bootstrap: содержит корневой компонент, который загружает наше приложение.

Вложенный компонент:

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

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

Различные способы стилизации компонента:

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

Встроенный CSS:

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

Тег стиля:

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

Свойство стиля декоратора компонента:

Преимущество применимо только к собственному HTML, но недостатком является отсутствие интеллекта для этого стиля кода.

StyleUrl В декораторе компонента:

  1. Создайте отдельный файл для этого стиля для соответствующего компонента, а styleUrl — это массив, содержащий другую таблицу стилей. Он инкапсулирован в таблицу стилей компонента и легко переиспользуется. У нас есть IntelliSense, и поддержка приложения проста, и у нас нет конфликта между стилем нашего проекта и стилем компонента.

Первоначально опубликовано на https://sagarjaybhay.net 1 июля 2019 г.