Question

如何在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']);
    }

}

Answer 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']);
  }
}

Answer 2

我会使用方法参数

使其更具动态性

导入角度路由器

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

创建一个包含点击事件的按钮

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

使用pagename参数创建方法

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

点击后，路由器应该路由到正确的页面

Answer 3

我会说使用routerLink指令＆amp;将其置于a（锚）标记

之上

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

您还需要从ROUTER_PROVIDERS＆amp;中删除providers将它包含在bootstrap依赖项中，然后在component的directives选项中添加ROUTER_DIRECTIVES以在HTML上使用routerLink指令。确保{Main}模块中已注入RouterModule及其路由

Answer 4

在按钮标记上尝试routerLink

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

More Info

Answer 5

window.location.reload();

做到了

Answer 6

在您的html文件中，此代码正确。

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

在您的component.ts文件中，紧接此代码。

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

点击时Angular 2重定向

6 个答案: