Посилання Angular 2 — Навігація

27

Від автора: в Angular 2 також є можливість виконувати ручну навігацію. Нижче поетапно описано, як додаються в Angular посилання навігації.

Крок 1 — Додайте наступний код у файл Inventory.component.ts.

import { Component } from ‘@angular/core’;
import { Router } from ‘@angular/router’;
@Component ({
selector: ‘my-app’,
template: ‘Inventory
Back to Products’
})
export class AppInventory {
constructor(private _router: Router){}
onBack(): void {
this._router.navigate([‘/Product’]);
}
}

Примітка:

Оголосіть html-тег, який містить функцію onBack, орієнтовану на подія click. Таким чином, коли користувач натискає на елемент, він буде перенаправлений на сторінку Products.

У функції onBack використовуйте router.navigate для переходу на потрібну сторінку.

Крок 2 — Тепер збережіть весь код і запустіть додаток, використовуючи npm. У браузері ви повинні побачити наступний результат.

Посилання Angular 2 — Навігація

Крок 3 — Натисніть посилання Inventory.

Посилання Angular 2 — Навігація

Крок 4 — Натисніть посилання Back to products, в результаті ви повинні повернутися на сторінку Products.

Посилання Angular 2 — Навігація