От автора: в Angular 2 также есть возможность выполнять ручную навигацию. Ниже поэтапно описано, как добавляются в Angular ссылки навигации.
Шаг 1 — Добавьте следующий код в файл Inventory.component.ts.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component ({ selector: 'my-app', template: 'Inventory <a class = "button" (click) = "onBack()">Back to Products</a>' }) export class AppInventory { constructor(private _router: Router){} onBack(): void { this._router.navigate(['/Product']); } } |
Примечание:
Объявите html-тег, который содержит функцию onBack, ориентированную на событие click. Таким образом, когда пользователь нажимает на элемент, он будет перенаправлен на страницу Products.
В функции onBack используйте router.navigate для перехода на необходимую страницу.
Шаг 2 — Теперь сохраните весь код и запустите приложение, используя npm. В браузере вы должны увидеть следующий результат.
Шаг 3 — Нажмите ссылку Inventory.
Шаг 4 — Нажмите ссылку Back to products, в результате вы должны вернуться на страницу Products.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.