使用角度2中的按钮导航到另一页 [英] Navigate to another page with a button in angular 2
本文介绍了使用角度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屋!
查看全文