Посилання в Angular 2 — Маршрутизація

35

Від автора: маршрутизація дозволяє направляти користувачів на різні сторінки на основі вибору, який вони роблять на головній сторінці. Отже, виходячи з обраного ним варіанта, користувачеві буде надано необхідний компонент 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

Посилання в Angular 2 — Маршрутизація

Крок 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. У браузері ви повинні побачити наступне.

Посилання в Angular 2 — Маршрутизація

Тепер, якщо ви натиснете на посилання Inventory, ви отримаєте наступний результат.

Посилання в Angular 2 — Маршрутизація

Додавання маршруту помилки

Маршрутизація також дозволяє додати маршрут помилки. Це може знадобитися, якщо користувач намагається перейти на сторінку, яка не існує в додатку. Давайте розглянемо, як це реалізувати.

Крок 1 — Додайте компонент PageNotFound через файл NotFound.component.ts, як показано нижче:

Посилання в Angular 2 — Маршрутизація

Крок 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. У браузері ви повинні побачити наступний результат. Тепер, коли ви перейдете за якою-небудь некоректною посиланням, ви побачите наступне.

Посилання в Angular 2 — Маршрутизація