Від автора: маршрутизація дозволяє направляти користувачів на різні сторінки на основі вибору, який вони роблять на головній сторінці. Отже, виходячи з обраного ним варіанта, користувачеві буде надано необхідний компонент Angular.
Давайте розглянемо, як працюють в додатку Angular посилання, і як здійснюється маршрутизація.
Крок 1 — Додайте тег базової посилання на файл index.html.
Angular QuickStart
System.import(‘main.js’).catch(function(err){ console.error(err); });
Крок 2 — Створіть два маршрути для застосування. Для цього потрібно додати 2 файли з іменами Inventory.component.ts і product.component.ts
Крок 3 — Помістіть файл product.component.ts наступний код.
import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘Products’,
})
export class Appproduct {
}
Крок 4 — Помістіть файл Inventory.component.ts наступний код.
import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘Inventory’,
})
export class AppInventory {
}
Обидва компоненти не роблять нічого особливого, просто відображають ключові слова для даного конкретного компонента. Таким чином, для компонента Inventory користувачеві буде відображатися ключове слово Inventory. А для компонента products відобразиться ключове слово product.
Крок 5 — додайте наступний код у файл app.module.ts –
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
import { Appproduct } from ‘./product.component’;
import { AppInventory } from ‘./Inventory.component’;
import { RouterModule, Routes } from ‘@angular/router’;
const appRoutes: Routes = [
{ path: ‘Огляд’, component: Appproduct },
{ path: ‘Inventory’, component: AppInventory },
];
@NgModule ({
imports: [ BrowserModule,
RouterModule.forRoot(appRoutes)],
declarations: [ AppComponent,Appproduct,AppInventory],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Відзначимо наступні моменти, що стосуються наведеного вище коду –
Додатки містять 2 маршруту, один — до компоненту Appproduct, а інший — до компоненту AppInventory.
Переконайтеся, що у вас оголошені обидва компоненти.
RouterModule.forRoot забезпечує додавання маршрутів в додаток.
Крок 6 — додайте наступний код у файл app.component.ts.
import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template:’
- Product
- Inventory
‘
})
export class AppComponent { }
Необхідно зазначити наступне: — це заповнювач для візуалізації компонента, на основі якого користувач робить вибір.
Тепер збережіть весь код і запустіть додаток, використовуючи npm. У браузері ви повинні побачити наступне.
Тепер, якщо ви натиснете на посилання Inventory, ви отримаєте наступний результат.
Додавання маршруту помилки
Маршрутизація також дозволяє додати маршрут помилки. Це може знадобитися, якщо користувач намагається перейти на сторінку, яка не існує в додатку. Давайте розглянемо, як це реалізувати.
Крок 1 — Додайте компонент PageNotFound через файл NotFound.component.ts, як показано нижче:
Крок 2 — Додайте в створений файл наступний код.
import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘Not Found’,
})
export class PageNotFoundComponent {
}
Крок 3 — Додайте у файл app.module.ts наступний код.
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
import { Appproduct } from ‘./product.component’
import { AppInventory } from ‘./Inventory.component’
import { PageNotFoundComponent } from ‘./NotFound.component’
import { RouterModule, Routes } from ‘@angular/router’;
const appRoutes: Routes = [
{ path: ‘Огляд’, component: Appproduct },
{ path: ‘Inventory’, component: AppInventory },
{ path: ‘**’, component: PageNotFoundComponent }
];
@NgModule ({
imports: [ BrowserModule,
RouterModule.forRoot(appRoutes)],
declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
Примітка: Тепер у нас є додатковий маршрут з ім’ям ‘**’, компонент: PageNotFoundComponent. Отже, ** призначений для будь-якого маршруту, який не є маршрутом за замовчуванням. Користувач буде перенаправлено до компоненту PageNotFoundComponent.
Тепер збережіть весь код і запустіть додаток з допомогою npm. У браузері ви повинні побачити наступний результат. Тепер, коли ви перейдете за якою-небудь некоректною посиланням, ви побачите наступне.