Пример компонентов Angular 9 для начинающих

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

Компоненты Angular — это самые маленькие части в приложении Angular. Мы можем определить Компоненты в файле Typescript.

Компоненты — это обычные классы TypeScript, но с декоратором компонентов . Он отличает стандартный класс от класса компонентов.

Пример угловых компонентов

Если вы проанализируйте файл app.component.ts , вы увидите что-то вроде этого.

 @Component ({селектор: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) 

Здесь Component определяется декоратором @Component . Он содержит метаданные .

Angular Application считывает это и идентифицирует этот класс как класс компонента.

Компонент = Класс + Метаданные + Шаблон

Итак, это комбинация трех вышеуказанных терминов.

// app.component.tsimport {Компонент} из '@ angular/core'; @ Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.  css ']}) export class AppComponent {title =' app ';} 

В приведенном выше примере сначала мы импортировали модуль Component из углового основной модуль. Затем мы определили декоратор и описали метаданные. Метаданные содержат три элемента.

  1. селектор
  2. templateUrl
  3. styleUrls

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

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

В приведенном выше примере title является свойством, и мы можем получить доступ к этому свойству в app.component.html файл.

  

Добро пожаловать в {{ заглавие }}!

Он определяет тег HTML. В приведенном выше примере app-root является селектором, и мы можем использовать его как тег в файле HTML.

templateUrl

Он представляет собой вид Компонента. Нам нужно указать путь к HTML-файлу. Итак, можно сказать, что это взгляд на архитектуру MVC. Мы можем видеть Компонент как Контроллер, и мы также можем определить Модель как Данные Компонента.

styleUrls

Мы указываем путь к конкретному файлу CSS для конкретного компонента.

Создание нового углового компонента.

Если вы используете AngularCLI, тогда мы можем нажать следующую команду в терминале, чтобы сгенерировать новый компонент.

 ng gc start 

Это будет сгенерируйте следующие файлы.

 create src/app/start/start.component.html (24 байта) create src/app/start/start.component.spec.ts (621 bytes) create src /app/start/start.component.ts (265 байт) create src/app/start/start.component.css (0 байт) 

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

//app.module.tsimport {StartComponent} из './start/start.component';declarations: [AppComponent, StartComponent], 

У этого компонента есть представление, CSS, логика или файл контроллера.

Для получения дополнительной информации посетите его официальную документацию.

См. Также

Угловая архитектура

Angular NgStyle

Angular NgClass

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