2017-01-02 71 views
23

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

//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> 
+0

可能重复的[Angular 2重定向点击](http://stackoverflow.com/questions/37252146/angular-2-redirect-on-click) – Habeeb

+1

尝试这样的事情:'' –

回答

56

使用它这个样子,应该工作:

<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

4
<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.navigate(['/user']); 
}; 
+0

应该将btnClick函数放在导出类AppModule {}? – Jurassic

8

您可以通过以下方式使用routerLink,

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn"> 

或在您的情况使用<button [routerLink]="['./url']">,更多信息,你可以在GitHub上读取整个堆栈跟踪https://github.com/angular/angular/issues/9471

的方法也是正确的,但他们创建了对组件文件的依赖关系。

希望您的关注得到解决。

+1

正是我在找的,谢谢。 –

相关问题