Angular 2 перенаправление при нажатии

Как создать простую переадресацию при нажатии на какую-нибудь кнопку в Angular 2? Уже пробовал:

import {Component, OnInit} from 'angular2/core';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'

@Component({
    selector: 'loginForm',
    templateUrl: 'login.html',
    providers: [ROUTER_PROVIDERS]
})

export class LoginComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['./SomewhereElse']);
    }

}

Ответ 1

Вы можете использовать поддержку событий Angular2:

import {Router} from '@angular/router';

@Component({
  selector: 'loginForm',
  template: '
    <div (click)="redirect()">Redirect</div>
  ',
  providers: [ROUTER_PROVIDERS]
})
export class LoginComponent implements OnInit {
  constructor(private router: Router) { }

  redirect() {
    this.router.navigate(['./SomewhereElse']);
  }
}

Ответ 2

Я бы сделал его более динамичным с использованием параметров метода

Импортировать маршрутизатор angular

import { Router } from '@angular/router';

Создать кнопку с событием click

<div (click)="redirect(my-page)">My page</div>

Создайте метод с параметром pagename

redirect(pagename: string) {
  this.router.navigate(['/'+pagename]);
}

При щелчке маршрутизатор должен перейти на правильную страницу

Ответ 3

Я бы сказал, использую директиву routerLink и поместил это над тегом a (anchor)

<a [routerLink]="['./SomewhereElse']">Redirect</a>

Также вам нужно удалить ROUTER_PROVIDERS из providers и включить его в зависимость bootstrap, а затем добавить ROUTER_DIRECTIVES в директиве вариант компонента для использования директивы routerLink для HTML. Удостоверьтесь RouterModule с его маршрутом был введен в основной модуль приложения.

Ответ 4

Попробуйте routerLink метку кнопки routerLink

 <button type="button"  [routerLink]="['/edit']">Edit</button>

Больше информации

Ответ 5

window.location.reload();

делает трюк

Ответ 6

в вашем HTML файле прямо этот код.

<button (click)="btnClick()">Cancel</button>

в вашем файле component.ts прямо этот код.

constructor(private router:Router) { }
btnClick(){
this.router.navigateByUrl("/payment");
}