[解決済み] 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>
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] Angular HTTP GET with TypeScript エラー http.get(...).map is not a function in [null].
-
[解決済み] NgModule.schemasにCUSTOM_ELEMENTS_SCHEMAを追加してもエラーが表示される。
-
[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法
-
[解決済み] Angular Materialダイアログエリアの外をクリックしてダイアログを閉じないようにする(Angularバージョン4.0以上で使用可能)
-
[解決済み] エクスポートされた2つのクラスを同じ名前でインポートする
-
[解決済み] ファイル 'app/hero.ts' is not a module error in console, where to store interfaces files in directory structure with angular2?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Angularが報告するインジェクションエラーとその解決方法...$injector:unpr]。
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み】Angular 6でサービスを生成する際に、InjectableデコレータでprovidedInの目的は何ですか?
-
[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、Angular2の「expression has changed after it was checked」例外を管理する方法
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] '合成プロパティ @panelState を発見しました。BrowserAnimationsModule" か "NoopAnimationsModule" のどちらかを入れてください'。
-
[解決済み] AngularのINPUT要素でngModel内のパイプを使用する
-
[解決済み] index.tsは何に使われているのですか?
-
[解決済み] 複数のng-content