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

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

 <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模块。

更新2

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

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

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

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

或<button [routerLink]="['./url']">在您的情况下使用，有关更多信息，请阅读github https://github.com/angular/angular/issues/9471上的整个stacktrace

其他方法也是正确的，但是它们会在组件文件上创建依赖项。

希望您的关注得到解决。

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

如下所示装饰路由器链接并用方括号链接很重要：

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

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

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

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

你可以改变

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

在像波纹管这样的构造函数中的组件级别

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

跟着这些步骤

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

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

祝好运。