Angular 2 重定向点击答案

【问题标题】：Angular 2 redirect on clickAngular 2 重定向点击
【发布时间】：2016-09-12 03:19:12
【问题描述】：

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

}

【问题讨论】：

标签： javascript redirect angular

【解决方案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']);
  }
}

【讨论】：

不工作。我有例外：错误：未捕获（承诺）：找不到默认出口
能否提供定义路由的模板内容（包含SomewhereElse 之一）？你应该有一个router-outlet ......
是的，我在里面。它在 app.component.ts 中。 @Component({ selector: 'my-app', template: `
Dashboard 主菜单
`, 指令：[ROUTER_DIRECTIVES] })
这个组件的路由配置是什么？
从'@angular/core'导入{组件，OnInit}；从'@angular/router'导入{路由，路由器，ROUTER_DIRECTIVES}；从'./login-form.component'导入{ LoginFormComponent }；从'./main-menu.component'导入{ MainMenuComponent }；

【解决方案2】：

我会使用方法参数使其更加动态

导入角度路由器

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

创建一个带有点击事件的按钮

<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>

~~您还需要从 providers 中删除 ROUTER_PROVIDERS 并将其包含在引导依赖项中，然后在组件的指令选项中添加 ROUTER_DIRECTIVES 以在 HTML 上使用 routerLink 指令。~~ 确保RouterModule 及其路由已注入主应用模块。

【讨论】：

@TeodorKolev 看看this plunkr 我是从 angular.io 获取的，其中有许多使用routerLink 创建的链接
@SaiyaffFarouk 你遇到了什么问题？
这是否适用于使用参数导航？这只是简单的重定向是吗？
@SaiyaffFarouk 是的，它是简单的重定向，如果你想传递动态参数，它可以是 [routerLink]="['./somewhereelse', someId, someName]".. 如果你想传递查询参数，你可以添加 queryParams 属性绑定，如[queryParams]="{ page: 1 }"

【解决方案4】：

在按钮标签上尝试routerLink

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

More Info

【讨论】：

@atishshimpi 为什么不只是：？为什么要使用方括号？
没有括号

【解决方案5】：

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

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

在您的 component.ts 文件中，此代码是正确的。

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

【讨论】：

【解决方案6】：

window.location.reload();

成功了

【讨论】：

这显然行不通，因为它只是重新加载页面而不是重定向。
它将重新加载整个 Angular 应用程序