Navega a otra página con un botón en angular 2

Estoy tratando de navegar a otra página haciendo clic en un botón, pero no funciona. Cuál podría ser el problema. Ahora estoy aprendiendo angular 2 y es un poco difícil para mí ahora. 

//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>
 44
angular
Author: Claies, 2017-01-02
Source

4 answers

Úsalo así, debería funcionar: 

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

También puedes usar router.navigateByUrl('..') así: 

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

Actualizar

Tienes que inyectar Router en el constructor así: 

constructor(private router: Router) { }

Solo entonces podrás usar this.router.

 109
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-20 13:48:49

Puede usar routerLink de la siguiente manera,

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

O use <button [routerLink]="['./url']"> en su caso, para obtener más información, puede leer toda la traza apilada en github https://github.com/angular/angular/issues/9471

Los otros métodos también son correctos pero crean una dependencia en el archivo componente.

Espero que tu preocupación esté resuelta.

 19
Author: Ronit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-27 08:20:11 
 <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']);
};
 6
Author: Aniket,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-02 13:08:47

Es importante que decores el enlace del router y el enlace con corchetes de la siguiente manera: 

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

Donde "/service" en este caso es la url de ruta especificada en el componente de enrutamiento.

 0
Author: Mwizak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-09 04:09:29