更新

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

重要的是，装饰路由器链接并用方括号链接如下：

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

在这种情况下，“ / service ”是路由组件中指定的路径网址。

Answer 5

您可以更改

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
在像波纹管这样的构造函数中的组件级别

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}

Answer 6

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

相关简单链接：

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

也可以使用像

这样的数组

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

获取指向 /Service/2102/Sign_in 的链接，其中 serviceID 是 2102。

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

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

然后您会收到一个指向 /Service/Sign_in?mode=red 的链接。

如果您当前的 url 已经有参数（例如 /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 的链接。

此处解释了更多保存历史记录或使用片段的模式：enter image description here

Answer 7

在按钮上具有路由器链接似乎对我来说很好：

<button class="nav-link" routerLink="/" (click)="hideMenu()">
     <i class="fa fa-home"></i> 
     <span>Home</span>
</button>

Answer 8

遵循这些步骤

在您的主要组件中添加导入

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

在同一文件中，为构造函数和方法添加以下代码

constructor(private route: Router) {}
public Dashbord()
{
 this.route.navigate(['/dashboard']);
}

这是您的.html文件代码

<button mat-button (click)="Dashbord()">Dashboard</button><br>

在app-routing.module.ts文件中添加仪表板

const routes: Routes =
[
  { path: '', pathMatch: 'full' ,component: TestComponent},
  { path: 'dashboard', component: DashboardComponent } 
];

祝你好运。

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

8 个答案:

更新

更新2