[解決済み] Angularで、「pathmatch: full」とは何か、どんな効果があるのか?
2022-05-12 17:05:50
質問
ここではパスマッチをフルに使っていますが、このパスマッチを削除すると、アプリをロードしたり、プロジェクトを実行することさえできなくなります。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
/* Feature Modules */
import { ProductModule } from './products/product.module';
@NgModule({
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
{ path: '**', redirectTo: 'welcome', pathMatch: 'full' }
]),
ProductModule
],
declarations: [
AppComponent,
WelcomeComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
解決方法は?
RouterModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
{ path: '**', component: 'pageNotFoundComponent' }
])
ケース1
pathMatch:'full'
:
この場合、アプリを起動する際に
localhost:4200
(または何らかのサーバー)のデフォルトページはウェルカムスクリーンになります。
https://localhost:4200/
もし
https://localhost:4200/gibberish
にリダイレクトされます。
ページNotFound
画面は
path:'**'
ワイルドカード
ケース2
pathMatch:'prefix'
:
もしルートが
{ path: '', redirectTo: 'welcome', pathMatch: 'prefix' }
というのは、すべてのurlが一致するからです。
path:''
が定義されています。
関連
-
Angularが報告するインジェクションエラーとその解決方法...$injector:unpr]。
-
[解決済み] Angular 4: パイプ 'AsyncPipe' に対する InvalidPipeArgument: '[object Object]' です。
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] 最後のページに戻るには
-
[解決済み] Angular CLI SASSオプション
-
[解決済み] Angular HTTP GET with TypeScript エラー http.get(...).map is not a function in [null].
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] Angular2の変更検出:ネストされたオブジェクトに対してngOnChangesが発生しない
最新
-
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.jsのエラーです。エラーです。[$injector:modulerr] 原因
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み】プロパティ「of」が「typeof Observable」型に存在しない【重複
-
[解決済み】take(1) vs first()
-
[解決済み] Angular 5 - クリップボードにコピーする
-
[解決済み] Angularアプリケーションが本番モードと開発モードのどちらで動作しているかを確認する方法
-
[解決済み] Angular2の変更検出:ネストされたオブジェクトに対してngOnChangesが発生しない
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?