Angular 2 — Навигация

В Angular 2 также можно выполнять ручную навигацию. Ниже приведены шаги.

Шаг 1. Добавьте следующий код в файл Inventory.component.ts.

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. Таким образом, когда пользователь нажимает на это, они будут перенаправлены обратно на страницу продуктов.

• В функции onBack используйте router.navigate для перехода на нужную страницу.

Объявите HTML-тег, в котором функция onBack помечена для события click. Таким образом, когда пользователь нажимает на это, они будут перенаправлены обратно на страницу продуктов.

В функции onBack используйте router.navigate для перехода на нужную страницу.

Шаг 2 — Теперь сохраните весь код и запустите приложение, используя npm. Зайдите в браузер, вы увидите следующий вывод.

Шаг 3 — Нажмите ссылку Инвентарь.

Шаг 4 — Нажмите на ссылку «Вернуться к продуктам», вы получите следующий результат, который вернет вас на страницу «Продукты».