Estou tentando navegar para outra página clicando em um botão, mas não funciona. Qual poderia ser o problema. Agora estou aprendendo angular 2 e é um pouco difícil para mim agora.

//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-o assim, deve funcionar:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

Você também pode usar router.navigateByUrl('..')desta forma:

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

Atualizar

Você tem que injetar Routerno construtor assim:

constructor(private router: Router) { }

só então você será capaz de usar this.router. Lembre-se também de importar RouterModuleem seu módulo.

Atualização 2

Agora, após o Angular v4, você pode adicionar routerLinkatributos diretamente no botão (conforme mencionado por @mark na seção de comentários) como abaixo -

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

Você pode usar o routerLink da seguinte maneira,

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

ou use <button [routerLink]="['./url']">no seu caso, para obter mais informações, você pode ler todo o stacktrace no github https://github.com/angular/angular/issues/9471

os outros métodos também estão corretos, mas eles criam uma dependência no arquivo do componente.

Espero que sua preocupação seja resolvida.

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

É importante decorar o link do roteador e vinculá-lo com colchetes da seguinte maneira:

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

Onde " / serviço ", neste caso, é o URL do caminho especificado no componente de roteamento.

Ter o link do roteador no botão parece funcionar bem para mim:

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

você pode mudar

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

no nível do componente no construtor como abaixo

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

Siga esses passos

Adicionar importação em seu componente principal

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

No mesmo arquivo, adicione o código abaixo para o construtor e o método

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

Este é o seu .htmlcódigo de arquivo

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

No app-routing.module.tsarquivo, adicionar painel

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

Boa sorte.