使用角度为2的按钮导航到另一个页面

Question

我试图通过单击按钮导航到另一个页面,但它无法正常工作.可能是什么问题呢.我现在正在学习角度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>

Answer 1

像这样使用它应该工作:

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

更新2

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

 <button routerLink="/url"> Button Label</button>

Answer 2

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

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

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

其他方法也是正确的,但它们会对组件文件产生依赖性.

希望您的关注得到解决.

Answer 3

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

Answer 4

有许多评论和答案建议routerLink以不同的方式使用。我认为，以下是当今最好的方法：

一个相对简单的链接：

<button [routerLink]="/Service/Sign_in">Add Customer</button>

也可以使用类似的数组

<button [routerLink]="['/Service', serviceId, 'Sign_in']">Add Customer</button>

获取2102/Service/2102/Sign_in所在位置的链接serviceID。

如果您有查询参数，请使用：

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}">Add Customer</button>

并且您会收到一个链接/Service/Sign_in?mode=red。

如果您当前的网址已经有参数（例如/Service/foo?status=bar），您可以添加keep 并添加其他参数：

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="merge">Add Customer</button>

这应该会给你一个链接到/Service/foo?status=bar&mode=red.

或者你甚至可以保留现有的（如果存在的话，例如如果你在/Service/foo?mode=blue）：

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="preserve">Add Customer</button>

并且您会收到一个链接/Service/Sign_in?mode=blue。

这里解释了更多保存历史或使用片段的模式： https: //angular.io/api/router/RouterLink