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

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

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

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

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

  • app-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-файл, и мы не видим ничего, что печатается в браузере. Посмотрим на тег в разделе body.

<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 импортируется из приложения основного родительского модуля, и то же самое передается модулю начальной загрузки, который загружает модуль приложения.

Давайте теперь посмотрим 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.

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, а также 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-cmp7></app-new-cmp>

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

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

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 {
   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 файл в соответствии с нашими требованиями.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved