Угловой 6 — Компоненты

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

• app.component.css

• app.component.html

• app.component.spec.ts

• app.component.ts

• app.module.ts

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

Давайте теперь запустим команду для создания компонента.

ng generate component new-cmp

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

D:\Node\Angular6App>ng generate 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 (398 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 — здесь мы можем определить модуль, свойства и т. д.

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 { 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
   ],
   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', //
   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.In, который имеет конструктор и метод с именем ngOnInit (). ngOnInit вызывается по умолчанию, когда класс выполняется.

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</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);

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Здесь AppComponent — это имя, то есть переменная для хранения ссылки на приложение. 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 6 Project!';
}

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

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

Селектор, т.е. 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-cmp></app-new-cmp>

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

Давайте посмотрим на новый компонент .html файл и файл new-cmp.component.ts .

новый-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() { }
}

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

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

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

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

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