1. ホーム
  2. angular

[解決済み] angular 2のボタンで別ページに移動する

2022-05-02 16:33:55

質問

ボタンをクリックして別のページに移動しようとしているのですが、うまくいきません。何が問題なのでしょうか。私は今、angular 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');
};

アップデート1

を注入する必要があります。 Router のようにコンストラクタに記述します。

constructor(private router: Router) { }

を使用することができるのは、このときだけです。 this.router . をインポートすることも忘れないでください。 RouterModule をモジュールに追加します。

アップデート2

Angular v4 以降では、直接的に routerLink という属性をボタンに追加します(コメント欄で@markさんがおっしゃっている通りです)(Angular 6以降、RouterModuleにRouteがある場合は"'/url?"はありません)。

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