Учебники

Angular7 — Компоненты

Октябрь 17, 2018

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

Файловая структура имеет компонент приложения и состоит из следующих файлов:

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

И если вы выбрали угловую маршрутизацию во время настройки проекта, файлы, связанные с маршрутизацией, также будут добавлены, и файлы будут следующими:

  • приложение-routing.module.ts

Указанные выше файлы создаются по умолчанию, когда мы создаем новый проект с помощью команды angular-cli.

Если вы откроете файл app.module.ts , он будет содержать несколько импортируемых библиотек, а также декларативный компонент, которому назначается компонент приложения следующим образом: 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Объявления включают переменную AppComponent, которую мы уже импортировали. Это становится родительским компонентом.

Теперь у angular-cli есть команда для создания собственного компонента. Однако компонент приложения, созданный по умолчанию, всегда будет оставаться родительским, а следующие созданные компоненты будут формировать дочерние компоненты.

Теперь давайте запустим команду для создания компонента с приведенной ниже строкой кода: 

ng g component new-cmp

Когда вы запустите указанную выше команду в командной строке, вы получите следующий вывод: 

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Теперь, если мы пойдем и проверим структуру файла, мы получим новую папку new-cmp, созданную в папке src / app .

Следующие файлы создаются в папке new-cmp —

  • new-cmp.component.css — файл css для нового компонента создан.
  • new-cmp.component.html — HTML-файл создан.
  • new-cmp.component.spec.ts — это можно использовать для модульного тестирования.
  • new-cmp.component.ts — здесь мы можем определить модуль, свойства и т. д.

Изменения добавляются в файл app.module .ts следующим образом: 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

Файл new-cmp.component.ts генерируется следующим образом -, 

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Если вы видите вышеупомянутый файл new-cmp.component.ts, он создает новый класс с именем NewCmpComponent , который реализует OnInit, в котором есть конструктор и метод с именем ngOnInit (). ngOnInit вызывается по умолчанию, когда класс выполняется.

Давайте проверим, как работает поток. Теперь компонент приложения, который создается по умолчанию, становится родительским компонентом. Любой компонент, добавленный позже, становится дочерним компонентом.

Когда мы нажимаем URL в браузере «http: // localhost: 4200 /» , он сначала выполняет файл index.html, который показан ниже — 

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

Выше приведен обычный HTML-файл, и мы не видим ничего, что печатается в браузере. Мы посмотрим на тег в разделе тела. 

<app-root></app-root>

Это корневой тег, созданный Angular по умолчанию. Этот тег имеет ссылку в файле main.ts. 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule импортируется из приложения основного родительского модуля, и то же самое дается модулю начальной загрузки, который загружает модуль appmodule.

Давайте теперь посмотрим файл app.module.ts — 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Здесь AppComponent — это имя, то есть переменная для хранения ссылки на app.component.ts, и то же самое дается для начальной загрузки. Давайте теперь посмотрим файл app.component.ts . 

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

Угловое ядро ​​импортируется и называется Компонентом, а в Деклараторе используется то же самое, что и — 

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})

В деклараторе даны ссылки на селектор, templateUrl и styleUrl. Селектор здесь — это не что иное, как тег, который помещен в файл index.html, который мы видели выше.

Класс AppComponent имеет переменную title, которая отображается в браузере. @Component использует templateUrl с именем app.component.html, который выглядит следующим образом: 

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

Он содержит только HTML-код и заголовок переменной в фигурных скобках. Он заменяется значением, которое присутствует в файле app.component.ts . Это называется обязательным. Мы обсудим концепцию связывания в следующей главе.

Теперь, когда мы создали новый компонент с именем new-cmp. То же самое включается в файл app.module.ts , когда запускается команда для создания нового компонента.

В app.module.ts есть ссылка на созданный новый компонент.

Давайте теперь проверим новые файлы, созданные в new-cmp.

новый-cmp.component.ts 

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

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

Декларатор имеет селектор app-new-cmp и templateUrl и styleUrl.

HTML-файл с именем new-cmp.component.html выглядит следующим образом: 

<p> 
   new-cmp works!
</p>

Как видно выше, у нас есть html-код, т. Е. Тег p. Файл стиля пуст, так как в настоящее время нам не нужны никакие стили. Но когда мы запускаем проект, мы не видим ничего, связанного с отображением нового компонента в браузере.

Браузер отображает следующий экран —

экран

Мы не видим ничего, связанного с отображением нового компонента. Новый созданный компонент имеет файл .html со следующими подробностями — 

<p>
   new-cmp works!
<p>

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

Селектор ‘ app-new-cmp ‘ создается для нового компонента из new-cmp.component.ts, как показано ниже — 

import { Component, OnInit } from '@angular/core';

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

Селектор, т.е. app-new-cmp, должен быть добавлен в app.component.html, т. Е. Основной родительский элемент создан по умолчанию следующим образом: 

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{ title }}!
   </h1>
</div>
<app-new-cmp7gt;</app-new-cmp>

При добавлении тега <app-new-cmp> </ app-new-cmp> все, что присутствует в файле .html, т. Е. New-cmp.component.html нового созданного компонента, будет отображаться на браузер вместе с данными родительского компонента.

Новый Cmp

Давайте добавим еще некоторые детали к новому созданному компоненту и увидим отображение в браузере.

новый-cmp.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

В классе мы добавили одну переменную с именем newcomponent, и значение « Введено в новый созданный компонент».

Вышеуказанная переменная добавляется в файл new-cmp.component.html следующим образом: 

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Теперь, так как мы включили селектор <app-new-cmp> </ app-new-cmp> в app.component.html, который является .html родительского компонента, содержимое присутствует в new-cmp.component. HTML- файл отображается в браузере. Мы также добавим некоторые CSS для нового компонента в файл new-cmp.component.css следующим образом: 

p { 
   color: blue; 
   font-size: 25px; 
}

Поэтому мы добавили синий цвет и размер шрифта в 25 пикселей для тегов p.

Следующий экран будет отображаться в браузере —

Цветной шрифт

Точно так же мы можем создавать компоненты и связывать их с помощью селектора в файле app.component.html в соответствии с нашими требованиями.

44
Share: