В последней части этой серии мы говорили о ловушке жизненного цикла Angular, реактивных формах, привязке отдельных данных и т. Д. Вы можете проверить все это здесь. В этой части мы будем изучать другие концепции Angular, которые упрощают создание одностраничных приложений (SPA).
Понятия, которые мы хотели бы изучить, включают:
- Маршрутизация
- Многоразовые компоненты
- Трубы
- Заказные трубы
Давайте объясним эти термины и их значение.
Маршрутизация. Маршрутизация - это просто способ визуализации новых компонентов, когда пользователь щелкает ссылку или вручную посещает ссылку, которая ведет к компоненту. Логика этого реализована в файле 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. В следующий раз мы погрузимся глубже. Хорошего дня.