В последней части этой серии мы говорили о ловушке жизненного цикла Angular, реактивных формах, привязке отдельных данных и т. Д. Вы можете проверить все это здесь. В этой части мы будем изучать другие концепции Angular, которые упрощают создание одностраничных приложений (SPA).

Понятия, которые мы хотели бы изучить, включают:

  1. Маршрутизация
  2. Многоразовые компоненты
  3. Трубы
  4. Заказные трубы

Давайте объясним эти термины и их значение.

Маршрутизация. Маршрутизация - это просто способ визуализации новых компонентов, когда пользователь щелкает ссылку или вручную посещает ссылку, которая ведет к компоненту. Логика этого реализована в файле src / app / app-routing.module.ts. Angular упрощает настройку, и мы сразу же увидим, как это сделать.

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

Каналы: так мы форматируем текст, числа, даты и т. д., используя некоторые встроенные правила в Angular.

Пользовательские каналы. Это способ создания ваших каналов и придания им набора правил, которые вы выбираете. Поговорим о том, чтобы быть твоим начальником.

Да начнется кодирование !!!

Для начала давайте создадим 2 новых компонента в дополнение к нашему домашнему компоненту. Мы бы назвали это компонентом заголовка и компонентом. Итак, в вашем терминале выполните следующую команду

ng g c header

Чтобы сгенерировать компонент заголовка, и

ng g c about

Чтобы сгенерировать компонент about.

Затем мы импортируем их в наш файл app-routing.module.ts, чтобы мы могли использовать их для нашей маршрутизации как таковые:

import { HeaderComponent } from './header/header.component';
import { AboutComponent } from './about/about.component';

Эта простая строка сделает эти компоненты доступными для нашей маршрутизации. Теперь давайте создадим URL маршрута для этих различных компонентов.

Помните, где мы указали наш домашний компонент в качестве базового маршрута, добавьте следующий фрагмент кода в этот массив объектов

{
path:'header',
component:HeaderComponent
},
{
path:'about',
component:AboutComponent
}

Если все работает хорошо, мы должны увидеть сообщение «header работает!» При посещении localhost: 4200 / header и «about works!» При посещении localhost: 4200 / около. Но мы же не ожидаем, что пользователь вручную изменит эти маршруты из браузера при посещении нашего сайта, не так ли? Итак, давайте добавим ссылки в заголовок и сделаем ссылку заголовка доступной для нашего домашнего компонента и компонента о компоненте.

Чтобы добавить ссылки в angular, мы не используем обычный href, если только мы не ссылаемся на внешний сайт. Вместо этого для связи с другим компонентом мы используем routerLink.

В файл header.component.html добавьте следующий фрагмент кода

<ul style="text-decoration: none">
<li><a routerLink="">home</a></li>
<li><a routerLink="/about">about</a></li>
</ul>

Указанный нами routerLink создает ссылку на компонент, как указано в файле app-routing.module.ts.

Теперь давайте убедимся, что этот файл заголовка доступен в нашем файле home.component.html и нашем about.component.html файлы. Сделать это относительно просто. Просто перейдите в файл header.component.ts, и вы увидите селектор с именем app-header. Скопируйте его и введите в тег HTML, затем добавьте в свои home.component.html и about.component.html файлы как таковые:

<app-header></app-header>

Мы успешно добавили маршрутизацию и повторно использовали компонент заголовка. Теперь посмотрим, как работают трубы.

ТРУБЫ

Скажем, в вашем машинописном тексте у нас есть строка с именем name, в которой говорится, что «angular - это хорошо», и мы хотим отображать этот текст в нашем HTML как нижний регистр, верхний регистр или его усечение, каналы делают это очень просто.

<h3>{{name| uppercase}}</h3>
<h3>{{name| lowercase}}</h3>
<h3>{{name| slice:0:6}}</h3>

Первый переводит строку в нижний регистр, второй - в верхний, а третий соединяет строку с первого по шестой индекс. Довольно мило, правда? Он также работает с валютой, числами, датами, массивами и т. Д. Давайте еще один пример форматирования даты.

Скажем, у нас есть текущая дата и время в вашем файле TS, мы можем использовать конвейер для отображения текущей даты или просто времени, мы можем использовать конвейер для форматирования этой даты как таковой:

<h3>{{today| date:'d/M/y'}}</h3>
<h3>{{today| date:'shortTime'}}</h3>
<h3>{{today|date:'longTime'}}</h3>

Наш результат должен выглядеть так:

Подробнее про угловую трубу можно прочитать здесь.

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

Создайте файл с именем sqr.pipe.ts в каталоге src / app и добавьте туда следующий фрагмент кода

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'sqrNumber'})
export class sqrNumber implements PipeTransform{
transform(value: number): number {
return Math.pow(value, 2)
}
}

Сначала нам нужно импортировать канал и PipeTransform из ядра angular, затем мы даем каналу имя, которое мы будем использовать при его вызове. Затем мы определяем набор правил и то, что наша труба должна возвращать, в данном случае квадрат числа.

После создания канала мы импортируем его в наш файл app.module.ts и добавляем в наши объявления, чтобы Angular знал, что он существует.

//coe here
import {sqrNumber} from './sqr.pipe'
@NgModule({
declarations: [
sqrNumber,
]

Теперь мы можем использовать нашу трубку как мы. Создайте в машинописном тексте переменную типа number и присвойте ей значение. Затем в вашем HTML используйте настраиваемый канал, например

<h3>the square of {{mynum}} is {{mynum|sqrNumber}}</h3>

Это даст такой результат

Здорово!!!

Теперь у нас есть хорошее представление о других концепциях Angular. В следующий раз мы погрузимся глубже. Хорошего дня.