角2のボタンで別のページに移動

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

更新

0コンストラクタでこのように：

constructor(private router: Router) { } 

this.routerを使用することができます。

Answer 2

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

あなたは

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

か、あなたのケースで<button [routerLink]="['./url']">を使用し、次のようにrouterLinkを使用することができ、より多くの情報のためにあなたはgithubのhttps://github.com/angular/angular/issues/9471

に全体スタックトレースを読むことができる他の方法も正しいですが、コンポーネントファイルに依存関係を作成します。

あなたの懸念が解決されることを願っています。