Я намагаюся перейти на іншу сторінку, натиснувши кнопку, але вона не спрацює. У чому може бути проблема. Зараз я вивчаю кутовий 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/isissue/9471

інші методи також є правильними, але вони створюють залежність від компонентного файлу.

Сподіваюся, ваша турбота буде вирішена.

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

Де " / послуга " в цьому випадку - 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 } 
];

Удачі.