web-dev-qa-db-ja.com

Angular：forRoot / forChildメソッドの使用法？

質問に対する正確な回答がないことに驚きました：

メソッドforRoot/forChildのために作られたものは何ですか？

たとえば、RouterModuleの場合：

Router.forRoot(routes)
angularangular-ngmodelangular-router
9
Stepan Suvorov

RouterModule＃forRoot

すべてのルータープロバイダーとディレクティブを含むモジュールを作成します。また、オプションで、初期ナビゲーションを実行するようにアプリケーションリスナーを設定します。

While RouterModule＃forChild

すべてのルーターディレクティブとルートを登録するプロバイダーを含むモジュールを作成します。

通常、1つ目はAngularアプリの初期構成を作成して「基本」ルートを登録するために使用され、2つ目は通常「相対」ルートを構成するために使用されます。

次のルートを持つアプリがあるとします。

  1. ユーザー
    • 登録
    • リスト
    • 削除する
  2. 会社
    • 登録
    • リスト
    • 削除する

次のような前述のメソッドを使用できます。

app-routing.module.ts （これは「実際の」アプリであり、ルートは異なります）

ベースルートuser/およびcompany/は、RouterModule#forRootを使用して登録されます。

//...
const  routes: Routes = [
  {
    path: 'user', loadChildren: './user/user.module#userModule'
    // this lazy loading is deprecated in favor of
    // loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
  },
  // same deprecation applies here
  { path: 'company', loadChildren: './company/company.module#CompanyModule'},
  // same deprecation applies here
  { path: '**', loadChildren: './page-not-found/page-not-found.module#PageNotFoundModule'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//...

user-routing.module.ts （これは「実際の」アプリであり、ルートは異なります）

また、user/およびcompany/への相対ルートは、RouterModule#forChildを使用して登録されます。

//...
const routes: Routes = [
  { path: 'list', component: UserComponent},
  { path: 'delete/:id', component: UserDeleteComponent},
  { path: 'register/:id', component: UserRegisterComponent},
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})

//...

そして、同じことが会社の子供たちのルートにも当てはまります。

7
lealceldeiro

forRoot（）

すべてのルータープロバイダーとディレクティブを含むモジュールを作成します。また、オプションで、初期ナビゲーションを実行するようにアプリケーションリスナーを設定します。

forChild（）

すべてのルーターディレクティブとルートを登録するプロバイダーを含むモジュールを作成します。

イーガーモジュールとレイジーモジュールモジュールの両方にインポートされるプロバイダーを含む共有モジュールに対してのみ、forRoot/forChild規則を使用します

Angularのモジュールとの一般的な混乱を回避する

これは素晴らしい答えです NgModuleでforRootを使用する目的は何ですか？ このトピックに関する追加情報を提供できます

2
malbarmawi

使用上の注意

RouterModuleは複数回インポートできます。遅延ロードされたバンドルごとに1回です。ルーターはグローバルな共有リソース（場所）を扱うため、複数のルーターサービスをアクティブにすることはできません。

そのため、モジュールを作成するには2つの方法があります。

1。 RouterModule.forRoot-forRootは、すべてのディレクティブ、指定されたルート、およびルーターサービス自体を含むモジュールを作成します。

2。 RouterModule.forChild-forChildは、すべてのディレクティブと指定されたルートを含むモジュールを作成しますが、ルーターサービスは含みません。

1
James Delaney