使用角度2中的按钮导航到另一页 [英] Navigate to another page with a button in angular 2

问题描述

我试图通过单击一个按钮导航到另一个页面，但是它无法正常工作.可能是什么问题呢.我现在正在学习角度2，这对我来说有点困难.

I am trying to navigate to a another page by clicking a button but it fails to work. What could be the problem. I am now learning angular 2 and it's a bit tough for me now.

//Routes/Path in a folder call AdminBoard

export const AdminRoutes: Routes =[

  {
    path: 'dashboard',

    component: AdminComponent,
    children: [
      {path: '', redirectTo: 'Home'},
      {path: 'Home', component: HomeComponent},
      {path: 'Service', component: ServiceComponent},
      {path: 'Service/Sign_in', component:CustomerComponent}

    ]

  }

];

//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}

  <button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>

推荐答案

像这样使用，应该可以工作:

Use it like this, should work:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

您也可以像这样使用router.navigateByUrl('..'):

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>    

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

btnClick= function () {
        this.router.navigateByUrl('/user');
};

更新

您必须像这样在构造函数中注入Router:

constructor(private router: Router) { }

只有这样，您才可以使用this.router.记住还要在模块中导入RouterModule.

only then you are able to use this.router. Remember also to import RouterModule in your module.

现在，在Angular v4之后，您可以直接在按钮上添加routerLink属性(如注释部分中的@mark所述)，如下所示-

Now, After Angular v4 you can directly add routerLink attribute on the button (As mentioned by @mark in comment section) like below -

 <button [routerLink]="'/url'"> Button Label</button>

这篇关于使用角度2中的按钮导航到另一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！