Ссылки Angular 2 — Навигация

Ссылки Angular 2 — Навигация

От автора: в Angular 2 также есть возможность выполнять ручную навигацию. Ниже поэтапно описано, как добавляются в Angular ссылки навигации.

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

Ссылки Angular 2 — Навигация

Шаг 3 — Нажмите ссылку Inventory.

Ссылки Angular 2 — Навигация

Шаг 4 — Нажмите ссылку Back to products, в результате вы должны вернуться на страницу Products.

Ссылки Angular 2 — Навигация

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree