点击时Angular 2重定向

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指令并把它放在a(锚)标签上

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

您还需要ROUTER_PROVIDERS从providers引导依赖项ROUTER_DIRECTIVES中删除并包含它,然后在组件的指令选项中添加routerLink对HTML 使用指令.确保RouterModule其主要应用程序模块中已注入其路由.

Answer 4

试试routerLink按钮标签

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

更多信息